diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • + @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@ +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + @@ -511,6 +1556,51 @@ +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@
    • +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • + @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@ +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + @@ -511,6 +1556,51 @@ +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@
    • +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • + @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@ +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + @@ -704,6 +1716,48 @@ +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@
    • +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • + @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@ +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + @@ -511,6 +1556,51 @@ +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@
    • +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • + @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@ +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + @@ -704,6 +1716,48 @@ +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@ +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + @@ -511,6 +1556,51 @@ +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@
    • +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • + @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@ +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + @@ -704,6 +1716,48 @@ +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + @@ -511,6 +1556,51 @@ +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@ +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + @@ -704,6 +1716,48 @@ +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + + + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + + + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@ +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@ +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + @@ -511,6 +1556,51 @@ +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@
    • +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • + @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@ +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + @@ -704,6 +1716,48 @@ +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + + + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + + + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@ +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 5a4ae34..c60a770 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -165,60 +165,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -226,10 +210,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -237,20 +221,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -258,42 +259,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -306,66 +303,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -377,21 +480,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -400,18 +509,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -425,22 +547,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -460,11 +613,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -475,6 +624,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 5a4ae34..c60a770 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -165,60 +165,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -226,10 +210,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -237,20 +221,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -258,42 +259,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -306,66 +303,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -377,21 +480,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -400,18 +509,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -425,22 +547,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -460,11 +613,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -475,6 +624,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3d4bfcc..de83961 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -168,14 +168,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -191,72 +191,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -282,25 +219,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 5a4ae34..c60a770 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -165,60 +165,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -226,10 +210,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -237,20 +221,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -258,42 +259,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -306,66 +303,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -377,21 +480,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -400,18 +509,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -425,22 +547,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -460,11 +613,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -475,6 +624,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3d4bfcc..de83961 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -168,14 +168,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -191,72 +191,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -282,25 +219,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index 8dde067..77dff94 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -138,7 +138,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -168,12 +170,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 5a4ae34..c60a770 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -165,60 +165,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -226,10 +210,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -237,20 +221,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -258,42 +259,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -306,66 +303,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -377,21 +480,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -400,18 +509,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -425,22 +547,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -460,11 +613,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -475,6 +624,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3d4bfcc..de83961 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -168,14 +168,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -191,72 +191,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -282,25 +219,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index 8dde067..77dff94 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -138,7 +138,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -168,12 +170,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 17e484c..7c01e73 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -189,16 +189,19 @@ for (var i in frameData) { var rect = frameData[i].frame; - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) + if (rect) { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) - // calculate the offset! + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); + + if(frameData[i].trimmed) + { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + // calculate the offset! + } + // this.frames[i] = ; } -// this.frames[i] = ; } if(this.texture.hasLoaded) diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 5a4ae34..c60a770 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -165,60 +165,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -226,10 +210,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -237,20 +221,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -258,42 +259,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -306,66 +303,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -377,21 +480,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -400,18 +509,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -425,22 +547,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -460,11 +613,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -475,6 +624,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3d4bfcc..de83961 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -168,14 +168,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -191,72 +191,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -282,25 +219,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index 8dde067..77dff94 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -138,7 +138,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -168,12 +170,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 17e484c..7c01e73 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -189,16 +189,19 @@ for (var i in frameData) { var rect = frameData[i].frame; - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) + if (rect) { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) - // calculate the offset! + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); + + if(frameData[i].trimmed) + { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + // calculate the offset! + } + // this.frames[i] = ; } -// this.frames[i] = ; } if(this.texture.hasLoaded) diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 32bc8ca..00ec3e2 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -162,7 +162,7 @@ this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:false + premultipliedAlpha:true }); } catch (e) @@ -286,6 +286,15 @@ { if(this.contextLost)return; + + + // if rendering a new stage clear the batchs.. + if(this.__stage !== stage) + { + if(this.__stage)this.checkVisibility(this.__stage, false) + this.__stage = stage; + } + // update children if need be // best to remove first! for (var i=0; i < stage.__childrenRemoved.length; i++) diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 5a4ae34..c60a770 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -165,60 +165,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -226,10 +210,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -237,20 +221,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -258,42 +259,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -306,66 +303,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -377,21 +480,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -400,18 +509,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -425,22 +547,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -460,11 +613,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -475,6 +624,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3d4bfcc..de83961 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -168,14 +168,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -191,72 +191,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -282,25 +219,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index 8dde067..77dff94 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -138,7 +138,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -168,12 +170,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 17e484c..7c01e73 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -189,16 +189,19 @@ for (var i in frameData) { var rect = frameData[i].frame; - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) + if (rect) { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) - // calculate the offset! + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); + + if(frameData[i].trimmed) + { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + // calculate the offset! + } + // this.frames[i] = ; } -// this.frames[i] = ; } if(this.texture.hasLoaded) diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 32bc8ca..00ec3e2 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -162,7 +162,7 @@ this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:false + premultipliedAlpha:true }); } catch (e) @@ -286,6 +286,15 @@ { if(this.contextLost)return; + + + // if rendering a new stage clear the batchs.. + if(this.__stage !== stage) + { + if(this.__stage)this.checkVisibility(this.__stage, false) + this.__stage = stage; + } + // update children if need be // best to remove first! for (var i=0; i < stage.__childrenRemoved.length; i++) diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 328e902..629587e 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -274,23 +274,8 @@ */ PIXI.Texture.fromCanvas = function(canvas) { - // create a canvas id?? - var texture = PIXI.TextureCache[canvas]; - - if(!texture) - { - var baseTexture = PIXI.BaseTextureCache[canvas]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas); - PIXI.BaseTextureCache[canvas] = baseTexture; - } - texture = new PIXI.Texture(baseTexture); - - PIXI.TextureCache[canvas] = texture; - } - - return texture; + var baseTexture = new PIXI.BaseTexture(canvas); + return new PIXI.Texture(baseTexture); } diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 5a4ae34..c60a770 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -165,60 +165,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -226,10 +210,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -237,20 +221,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -258,42 +259,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -306,66 +303,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -377,21 +480,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -400,18 +509,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -425,22 +547,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -460,11 +613,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -475,6 +624,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3d4bfcc..de83961 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -168,14 +168,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -191,72 +191,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -282,25 +219,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index 8dde067..77dff94 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -138,7 +138,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -168,12 +170,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 17e484c..7c01e73 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -189,16 +189,19 @@ for (var i in frameData) { var rect = frameData[i].frame; - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) + if (rect) { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) - // calculate the offset! + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); + + if(frameData[i].trimmed) + { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + // calculate the offset! + } + // this.frames[i] = ; } -// this.frames[i] = ; } if(this.texture.hasLoaded) diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 32bc8ca..00ec3e2 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -162,7 +162,7 @@ this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:false + premultipliedAlpha:true }); } catch (e) @@ -286,6 +286,15 @@ { if(this.contextLost)return; + + + // if rendering a new stage clear the batchs.. + if(this.__stage !== stage) + { + if(this.__stage)this.checkVisibility(this.__stage, false) + this.__stage = stage; + } + // update children if need be // best to remove first! for (var i=0; i < stage.__childrenRemoved.length; i++) diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 328e902..629587e 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -274,23 +274,8 @@ */ PIXI.Texture.fromCanvas = function(canvas) { - // create a canvas id?? - var texture = PIXI.TextureCache[canvas]; - - if(!texture) - { - var baseTexture = PIXI.BaseTextureCache[canvas]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas); - PIXI.BaseTextureCache[canvas] = baseTexture; - } - texture = new PIXI.Texture(baseTexture); - - PIXI.TextureCache[canvas] = texture; - } - - return texture; + var baseTexture = new PIXI.BaseTexture(canvas); + return new PIXI.Texture(baseTexture); } diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index a186445..5a3be06 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 5a4ae34..c60a770 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -165,60 +165,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -226,10 +210,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -237,20 +221,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -258,42 +259,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -306,66 +303,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -377,21 +480,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -400,18 +509,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -425,22 +547,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -460,11 +613,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -475,6 +624,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3d4bfcc..de83961 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -168,14 +168,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -191,72 +191,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -282,25 +219,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index 8dde067..77dff94 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -138,7 +138,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -168,12 +170,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 17e484c..7c01e73 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -189,16 +189,19 @@ for (var i in frameData) { var rect = frameData[i].frame; - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) + if (rect) { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) - // calculate the offset! + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); + + if(frameData[i].trimmed) + { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + // calculate the offset! + } + // this.frames[i] = ; } -// this.frames[i] = ; } if(this.texture.hasLoaded) diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 32bc8ca..00ec3e2 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -162,7 +162,7 @@ this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:false + premultipliedAlpha:true }); } catch (e) @@ -286,6 +286,15 @@ { if(this.contextLost)return; + + + // if rendering a new stage clear the batchs.. + if(this.__stage !== stage) + { + if(this.__stage)this.checkVisibility(this.__stage, false) + this.__stage = stage; + } + // update children if need be // best to remove first! for (var i=0; i < stage.__childrenRemoved.length; i++) diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 328e902..629587e 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -274,23 +274,8 @@ */ PIXI.Texture.fromCanvas = function(canvas) { - // create a canvas id?? - var texture = PIXI.TextureCache[canvas]; - - if(!texture) - { - var baseTexture = PIXI.BaseTextureCache[canvas]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas); - PIXI.BaseTextureCache[canvas] = baseTexture; - } - texture = new PIXI.Texture(baseTexture); - - PIXI.TextureCache[canvas] = texture; - } - - return texture; + var baseTexture = new PIXI.BaseTexture(canvas); + return new PIXI.Texture(baseTexture); } diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index a186445..5a3be06 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index a186445..5a3be06 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 5a4ae34..c60a770 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -165,60 +165,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -226,10 +210,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -237,20 +221,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -258,42 +259,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -306,66 +303,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -377,21 +480,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -400,18 +509,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -425,22 +547,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -460,11 +613,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -475,6 +624,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3d4bfcc..de83961 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -168,14 +168,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -191,72 +191,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -282,25 +219,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index 8dde067..77dff94 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -138,7 +138,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -168,12 +170,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 17e484c..7c01e73 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -189,16 +189,19 @@ for (var i in frameData) { var rect = frameData[i].frame; - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) + if (rect) { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) - // calculate the offset! + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); + + if(frameData[i].trimmed) + { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + // calculate the offset! + } + // this.frames[i] = ; } -// this.frames[i] = ; } if(this.texture.hasLoaded) diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 32bc8ca..00ec3e2 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -162,7 +162,7 @@ this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:false + premultipliedAlpha:true }); } catch (e) @@ -286,6 +286,15 @@ { if(this.contextLost)return; + + + // if rendering a new stage clear the batchs.. + if(this.__stage !== stage) + { + if(this.__stage)this.checkVisibility(this.__stage, false) + this.__stage = stage; + } + // update children if need be // best to remove first! for (var i=0; i < stage.__childrenRemoved.length; i++) diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 328e902..629587e 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -274,23 +274,8 @@ */ PIXI.Texture.fromCanvas = function(canvas) { - // create a canvas id?? - var texture = PIXI.TextureCache[canvas]; - - if(!texture) - { - var baseTexture = PIXI.BaseTextureCache[canvas]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas); - PIXI.BaseTextureCache[canvas] = baseTexture; - } - texture = new PIXI.Texture(baseTexture); - - PIXI.TextureCache[canvas] = texture; - } - - return texture; + var baseTexture = new PIXI.BaseTexture(canvas); + return new PIXI.Texture(baseTexture); } diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index a186445..5a3be06 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index a186445..5a3be06 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index a186445..5a3be06 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 5a4ae34..c60a770 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -165,60 +165,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -226,10 +210,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -237,20 +221,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -258,42 +259,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -306,66 +303,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -377,21 +480,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -400,18 +509,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -425,22 +547,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -460,11 +613,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -475,6 +624,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3d4bfcc..de83961 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -168,14 +168,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -191,72 +191,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -282,25 +219,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index 8dde067..77dff94 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -138,7 +138,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -168,12 +170,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 17e484c..7c01e73 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -189,16 +189,19 @@ for (var i in frameData) { var rect = frameData[i].frame; - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) + if (rect) { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) - // calculate the offset! + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); + + if(frameData[i].trimmed) + { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + // calculate the offset! + } + // this.frames[i] = ; } -// this.frames[i] = ; } if(this.texture.hasLoaded) diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 32bc8ca..00ec3e2 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -162,7 +162,7 @@ this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:false + premultipliedAlpha:true }); } catch (e) @@ -286,6 +286,15 @@ { if(this.contextLost)return; + + + // if rendering a new stage clear the batchs.. + if(this.__stage !== stage) + { + if(this.__stage)this.checkVisibility(this.__stage, false) + this.__stage = stage; + } + // update children if need be // best to remove first! for (var i=0; i < stage.__childrenRemoved.length; i++) diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 328e902..629587e 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -274,23 +274,8 @@ */ PIXI.Texture.fromCanvas = function(canvas) { - // create a canvas id?? - var texture = PIXI.TextureCache[canvas]; - - if(!texture) - { - var baseTexture = PIXI.BaseTextureCache[canvas]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas); - PIXI.BaseTextureCache[canvas] = baseTexture; - } - texture = new PIXI.Texture(baseTexture); - - PIXI.TextureCache[canvas] = texture; - } - - return texture; + var baseTexture = new PIXI.BaseTexture(canvas); + return new PIXI.Texture(baseTexture); } diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index a186445..5a3be06 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index a186445..5a3be06 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index a186445..5a3be06 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index a186445..5a3be06 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 5a4ae34..c60a770 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -165,60 +165,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -226,10 +210,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -237,20 +221,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -258,42 +259,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -306,66 +303,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -377,21 +480,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -400,18 +509,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -425,22 +547,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -460,11 +613,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -475,6 +624,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3d4bfcc..de83961 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -168,14 +168,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -191,72 +191,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -282,25 +219,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index 8dde067..77dff94 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -138,7 +138,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -168,12 +170,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 17e484c..7c01e73 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -189,16 +189,19 @@ for (var i in frameData) { var rect = frameData[i].frame; - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) + if (rect) { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) - // calculate the offset! + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); + + if(frameData[i].trimmed) + { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + // calculate the offset! + } + // this.frames[i] = ; } -// this.frames[i] = ; } if(this.texture.hasLoaded) diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 32bc8ca..00ec3e2 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -162,7 +162,7 @@ this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:false + premultipliedAlpha:true }); } catch (e) @@ -286,6 +286,15 @@ { if(this.contextLost)return; + + + // if rendering a new stage clear the batchs.. + if(this.__stage !== stage) + { + if(this.__stage)this.checkVisibility(this.__stage, false) + this.__stage = stage; + } + // update children if need be // best to remove first! for (var i=0; i < stage.__childrenRemoved.length; i++) diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 328e902..629587e 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -274,23 +274,8 @@ */ PIXI.Texture.fromCanvas = function(canvas) { - // create a canvas id?? - var texture = PIXI.TextureCache[canvas]; - - if(!texture) - { - var baseTexture = PIXI.BaseTextureCache[canvas]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas); - PIXI.BaseTextureCache[canvas] = baseTexture; - } - texture = new PIXI.Texture(baseTexture); - - PIXI.TextureCache[canvas] = texture; - } - - return texture; + var baseTexture = new PIXI.BaseTexture(canvas); + return new PIXI.Texture(baseTexture); } diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index a186445..5a3be06 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index a186445..5a3be06 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index a186445..5a3be06 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index a186445..5a3be06 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index a186445..5a3be06 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 5a4ae34..c60a770 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -165,60 +165,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -226,10 +210,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -237,20 +221,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -258,42 +259,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -306,66 +303,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -377,21 +480,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -400,18 +509,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -425,22 +547,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -460,11 +613,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -475,6 +624,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3d4bfcc..de83961 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -168,14 +168,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -191,72 +191,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -282,25 +219,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index 8dde067..77dff94 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -138,7 +138,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -168,12 +170,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 17e484c..7c01e73 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -189,16 +189,19 @@ for (var i in frameData) { var rect = frameData[i].frame; - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) + if (rect) { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) - // calculate the offset! + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); + + if(frameData[i].trimmed) + { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + // calculate the offset! + } + // this.frames[i] = ; } -// this.frames[i] = ; } if(this.texture.hasLoaded) diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 32bc8ca..00ec3e2 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -162,7 +162,7 @@ this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:false + premultipliedAlpha:true }); } catch (e) @@ -286,6 +286,15 @@ { if(this.contextLost)return; + + + // if rendering a new stage clear the batchs.. + if(this.__stage !== stage) + { + if(this.__stage)this.checkVisibility(this.__stage, false) + this.__stage = stage; + } + // update children if need be // best to remove first! for (var i=0; i < stage.__childrenRemoved.length; i++) diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 328e902..629587e 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -274,23 +274,8 @@ */ PIXI.Texture.fromCanvas = function(canvas) { - // create a canvas id?? - var texture = PIXI.TextureCache[canvas]; - - if(!texture) - { - var baseTexture = PIXI.BaseTextureCache[canvas]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas); - PIXI.BaseTextureCache[canvas] = baseTexture; - } - texture = new PIXI.Texture(baseTexture); - - PIXI.TextureCache[canvas] = texture; - } - - return texture; + var baseTexture = new PIXI.BaseTexture(canvas); + return new PIXI.Texture(baseTexture); } diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index a186445..5a3be06 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index a186445..5a3be06 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index a186445..5a3be06 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index a186445..5a3be06 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index a186445..5a3be06 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 6 - Interactivity/pixi.js b/examples/example 6 - Interactivity/pixi.js index a186445..5a3be06 100644 --- a/examples/example 6 - Interactivity/pixi.js +++ b/examples/example 6 - Interactivity/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 5a4ae34..c60a770 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -165,60 +165,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -226,10 +210,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -237,20 +221,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -258,42 +259,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -306,66 +303,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -377,21 +480,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -400,18 +509,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -425,22 +547,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -460,11 +613,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -475,6 +624,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3d4bfcc..de83961 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -168,14 +168,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -191,72 +191,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -282,25 +219,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index 8dde067..77dff94 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -138,7 +138,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -168,12 +170,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 17e484c..7c01e73 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -189,16 +189,19 @@ for (var i in frameData) { var rect = frameData[i].frame; - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) + if (rect) { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) - // calculate the offset! + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); + + if(frameData[i].trimmed) + { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + // calculate the offset! + } + // this.frames[i] = ; } -// this.frames[i] = ; } if(this.texture.hasLoaded) diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 32bc8ca..00ec3e2 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -162,7 +162,7 @@ this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:false + premultipliedAlpha:true }); } catch (e) @@ -286,6 +286,15 @@ { if(this.contextLost)return; + + + // if rendering a new stage clear the batchs.. + if(this.__stage !== stage) + { + if(this.__stage)this.checkVisibility(this.__stage, false) + this.__stage = stage; + } + // update children if need be // best to remove first! for (var i=0; i < stage.__childrenRemoved.length; i++) diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 328e902..629587e 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -274,23 +274,8 @@ */ PIXI.Texture.fromCanvas = function(canvas) { - // create a canvas id?? - var texture = PIXI.TextureCache[canvas]; - - if(!texture) - { - var baseTexture = PIXI.BaseTextureCache[canvas]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas); - PIXI.BaseTextureCache[canvas] = baseTexture; - } - texture = new PIXI.Texture(baseTexture); - - PIXI.TextureCache[canvas] = texture; - } - - return texture; + var baseTexture = new PIXI.BaseTexture(canvas); + return new PIXI.Texture(baseTexture); } diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index a186445..5a3be06 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index a186445..5a3be06 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index a186445..5a3be06 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index a186445..5a3be06 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index a186445..5a3be06 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 6 - Interactivity/pixi.js b/examples/example 6 - Interactivity/pixi.js index a186445..5a3be06 100644 --- a/examples/example 6 - Interactivity/pixi.js +++ b/examples/example 6 - Interactivity/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 7 - Transparent Background/pixi.js b/examples/example 7 - Transparent Background/pixi.js index 18f7abd..5a3be06 100644 --- a/examples/example 7 - Transparent Background/pixi.js +++ b/examples/example 7 - Transparent Background/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-08 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -433,14 +529,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,25 +580,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** @@ -1798,6 +1988,15 @@ { if(this.contextLost)return; + + + // if rendering a new stage clear the batchs.. + if(this.__stage !== stage) + { + if(this.__stage)this.checkVisibility(this.__stage, false) + this.__stage = stage; + } + // update children if need be // best to remove first! for (var i=0; i < stage.__childrenRemoved.length; i++) @@ -3695,23 +3894,8 @@ */ PIXI.Texture.fromCanvas = function(canvas) { - // create a canvas id?? - var texture = PIXI.TextureCache[canvas]; - - if(!texture) - { - var baseTexture = PIXI.BaseTextureCache[canvas]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas); - PIXI.BaseTextureCache[canvas] = baseTexture; - } - texture = new PIXI.Texture(baseTexture); - - PIXI.TextureCache[canvas] = texture; - } - - return texture; + var baseTexture = new PIXI.BaseTexture(canvas); + return new PIXI.Texture(baseTexture); } @@ -3813,16 +3997,19 @@ for (var i in frameData) { var rect = frameData[i].frame; - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) + if (rect) { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) - // calculate the offset! + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); + + if(frameData[i].trimmed) + { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + // calculate the offset! + } + // this.frames[i] = ; } -// this.frames[i] = ; } if(this.texture.hasLoaded) diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 5a4ae34..c60a770 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -165,60 +165,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -226,10 +210,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -237,20 +221,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -258,42 +259,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -306,66 +303,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -377,21 +480,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -400,18 +509,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -425,22 +547,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -460,11 +613,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -475,6 +624,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3d4bfcc..de83961 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -168,14 +168,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -191,72 +191,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -282,25 +219,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index 8dde067..77dff94 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -138,7 +138,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -168,12 +170,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 17e484c..7c01e73 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -189,16 +189,19 @@ for (var i in frameData) { var rect = frameData[i].frame; - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) + if (rect) { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) - // calculate the offset! + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); + + if(frameData[i].trimmed) + { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + // calculate the offset! + } + // this.frames[i] = ; } -// this.frames[i] = ; } if(this.texture.hasLoaded) diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 32bc8ca..00ec3e2 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -162,7 +162,7 @@ this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:false + premultipliedAlpha:true }); } catch (e) @@ -286,6 +286,15 @@ { if(this.contextLost)return; + + + // if rendering a new stage clear the batchs.. + if(this.__stage !== stage) + { + if(this.__stage)this.checkVisibility(this.__stage, false) + this.__stage = stage; + } + // update children if need be // best to remove first! for (var i=0; i < stage.__childrenRemoved.length; i++) diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 328e902..629587e 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -274,23 +274,8 @@ */ PIXI.Texture.fromCanvas = function(canvas) { - // create a canvas id?? - var texture = PIXI.TextureCache[canvas]; - - if(!texture) - { - var baseTexture = PIXI.BaseTextureCache[canvas]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas); - PIXI.BaseTextureCache[canvas] = baseTexture; - } - texture = new PIXI.Texture(baseTexture); - - PIXI.TextureCache[canvas] = texture; - } - - return texture; + var baseTexture = new PIXI.BaseTexture(canvas); + return new PIXI.Texture(baseTexture); } diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index a186445..5a3be06 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index a186445..5a3be06 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index a186445..5a3be06 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index a186445..5a3be06 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index a186445..5a3be06 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 6 - Interactivity/pixi.js b/examples/example 6 - Interactivity/pixi.js index a186445..5a3be06 100644 --- a/examples/example 6 - Interactivity/pixi.js +++ b/examples/example 6 - Interactivity/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 7 - Transparent Background/pixi.js b/examples/example 7 - Transparent Background/pixi.js index 18f7abd..5a3be06 100644 --- a/examples/example 7 - Transparent Background/pixi.js +++ b/examples/example 7 - Transparent Background/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-08 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -433,14 +529,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,25 +580,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** @@ -1798,6 +1988,15 @@ { if(this.contextLost)return; + + + // if rendering a new stage clear the batchs.. + if(this.__stage !== stage) + { + if(this.__stage)this.checkVisibility(this.__stage, false) + this.__stage = stage; + } + // update children if need be // best to remove first! for (var i=0; i < stage.__childrenRemoved.length; i++) @@ -3695,23 +3894,8 @@ */ PIXI.Texture.fromCanvas = function(canvas) { - // create a canvas id?? - var texture = PIXI.TextureCache[canvas]; - - if(!texture) - { - var baseTexture = PIXI.BaseTextureCache[canvas]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas); - PIXI.BaseTextureCache[canvas] = baseTexture; - } - texture = new PIXI.Texture(baseTexture); - - PIXI.TextureCache[canvas] = texture; - } - - return texture; + var baseTexture = new PIXI.BaseTexture(canvas); + return new PIXI.Texture(baseTexture); } @@ -3813,16 +3997,19 @@ for (var i in frameData) { var rect = frameData[i].frame; - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) + if (rect) { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) - // calculate the offset! + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); + + if(frameData[i].trimmed) + { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + // calculate the offset! + } + // this.frames[i] = ; } -// this.frames[i] = ; } if(this.texture.hasLoaded) diff --git a/examples/example 8 - Dragging/pixi.js b/examples/example 8 - Dragging/pixi.js index e4b3ce6..5a3be06 100644 --- a/examples/example 8 - Dragging/pixi.js +++ b/examples/example 8 - Dragging/pixi.js @@ -942,8 +942,6 @@ // while // hit test - - for (var i = 0; i < length; i++) { var item = this.interactiveItems[i]; @@ -1098,11 +1096,7 @@ for (var i = 0; i < length; i++) { var item = this.interactiveItems[i]; - - if(item.touchmove) - { - item.touchmove(touchData); - } + if(item.touchmove)item.touchmove(touchData); } } @@ -1110,8 +1104,8 @@ { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -1132,7 +1126,6 @@ if(item.touchstart || item.tap) { item.__hit = this.hitTest(item, touchData); - item.__touchIdentifier = touchEvent.identifier; if(item.__hit) { @@ -1159,7 +1152,6 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - var global = touchData.global; var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); @@ -1168,10 +1160,8 @@ for (var j = 0; j < length; j++) { var item = this.interactiveItems[j]; - var itemTouchData = this.touchs[item.__touchIdentifier]; item.__hit = this.hitTest(item, touchData); - if(itemTouchData == touchData) { // so this one WAS down... @@ -1228,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js index a186445..5a3be06 100644 --- a/bin/pixi.dev.js +++ b/bin/pixi.dev.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/bin/pixi.js b/bin/pixi.js index 931371f..919b94a 100644 --- a/bin/pixi.js +++ b/bin/pixi.js @@ -4,10 +4,10 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php */ -function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!0},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*o,i[1]=c*s+u*h,i[2]=c*n+u*a+d,i[3]=l*r+I*o,i[4]=l*s+I*h,i[5]=l*n+I*a+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0,this.interactive=!1},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[]},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.disableMouseOver=function(){this.mouseoverEnabled&&(this.mouseoverEnabled=!1,this.target&&this.target.view.removeEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.enableMouseOver=function(){this.mouseoverEnabled||(this.mouseoverEnabled=!1,this.target&&this.target.view.addEventListener("mousemove",this.onMouseMove.bind(this)))},PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t){for(var e=t.children,i=e.length,r=i-1;r>=0;r--){var s=e[r];if(s instanceof PIXI.Sprite)s.interactive&&this.interactiveItems.push(s);else if(!s.interactive)continue;s.children.length>0&&this.collectInteractiveSprite(s)}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,this.mouseoverEnabled&&t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),t.view.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.hitTest=function(t){this.dirty&&(this.dirty=!1,this.interactiveItems=[],this.collectInteractiveSprite(this.stage));var e=this.tempPoint;this.tempMatrix;for(var i=t.global,r=this.interactiveItems.length,s=0;r>s;s++){var n=this.interactiveItems[s];if(n.visible){var o=n.worldTransform,h=o[0],a=o[1],c=o[2],u=o[3],d=o[4],l=o[5],I=1/(h*d+a*-u);e.x=d*I*i.x+-a*I*i.y+(l*a-c*d)*I,e.y=h*I*i.y+-u*I*i.x+(-l*h+c*u)*I;var f=-n.width*n.anchor.x;if(e.x>f&&e.xp&&e.yr;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);var o=this.hitTest(n);o&&(n.currentDown=o,n.target=o,o.touchstart&&o.touchstart(n))}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];if(n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height),n.currentDown){n.currentDown.touchend&&n.currentDown.touchend(n);var o=this.hitTest(n);o==n.currentDown&&n.currentDown.tap&&n.currentDown.tap(n),n.currentDown=null}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0)},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*o+f*c,i[1]=l*s+I*h+f*u,i[2]=l*n+I*a+f*d,i[3]=p*r+v*o+g*c,i[4]=p*s+v*h+g*u,i[5]=p*n+v*a+g*d,i[6]=x*r+P*o+b*c,i[7]=x*s+P*h+b*u,i[8]=x*n+P*a+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],o=t[7],h=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=o,t[14]=h,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],o=t[3],h=t[4],a=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],X=e[3];return i[0]=P*r+b*h+m*d+X*p,i[1]=P*s+b*a+m*l+X*v,i[2]=P*n+b*c+m*I+X*g,i[3]=P*o+b*u+m*f+X*x,P=e[4],b=e[5],m=e[6],X=e[7],i[4]=P*r+b*h+m*d+X*p,i[5]=P*s+b*a+m*l+X*v,i[6]=P*n+b*c+m*I+X*g,i[7]=P*o+b*u+m*f+X*x,P=e[8],b=e[9],m=e[10],X=e[11],i[8]=P*r+b*h+m*d+X*p,i[9]=P*s+b*a+m*l+X*v,i[10]=P*n+b*c+m*I+X*g,i[11]=P*o+b*u+m*f+X*x,P=e[12],b=e[13],m=e[14],X=e[15],i[12]=P*r+b*h+m*d+X*p,i[13]=P*s+b*a+m*l+X*v,i[14]=P*n+b*c+m*I+X*g,i[15]=P*o+b*u+m*f+X*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var o=this.gl;this.batch=new PIXI.WebGLBatch(o),o.disable(o.DEPTH_TEST),o.enable(o.BLEND),o.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),o=PIXI._getBatch(this.gl),h=this.batchs.indexOf(r);return o.init(t),this.batchs.splice(h+1,0,o,n),void 0}}}else s=i;var o=PIXI._getBatch(this.gl);if(o.init(t),r){var h=this.batchs.indexOf(r);this.batchs.splice(h+1,0,o)}else this.batchs.push(o)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,o=i[n],h=i[n+2],a=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(o,c),e.lineTo(h,u),e.lineTo(a,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var o=2*n,h=i[o],a=i[o+2],c=i[o+4],u=i[o+1],d=i[o+3],l=i[o+5],I=r[o]*t.texture.width,f=r[o+2]*t.texture.width,p=r[o+4]*t.texture.width,v=r[o+1]*t.texture.height,g=r[o+3]*t.texture.height,x=r[o+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(h,u),e.lineTo(a,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=h*g+v*c+a*x-g*c-v*a-h*x,m=I*a+h*p+f*c-a*p-h*f-I*c,X=I*g*c+v*a*p+h*f*x-h*g*p-v*f*c-I*a*x,y=u*g+v*l+d*x-g*l-v*d-u*x,_=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,y/P,m/P,_/P,X/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h,c=h/(o-1);h%2?(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1):(e[a]=c,e[a+1]=0,e[a+2]=c,e[a+3]=1),a=2*h,r[a]=1,r[a+1]=1,a=2*h,i[a]=a,i[a+1]=a+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var o=t.length,h=1;o>h;h++){var n=t[h],a=4*h;e=t.length-1>h?t[h+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-h/(o-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[a]=n.x+s.x,i[a+1]=n.y+s.y,i[a+2]=n.x-s.x,i[a+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,o=0;t.length>o;o++)if(s==t[o]){n="img";break}if("img"!=n)for(var o=0;e.length>o;o++)if(s==e[o]){n="atlas";break}if("img"==n){var h=PIXI.Texture.fromImage(r,this.crossorigin);if(h.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var a=this;h.baseTexture.addEventListener("loaded",function(){a.onAssetLoaded()}),this.assets.push(h)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var a=this;c.addEventListener("loaded",function(){a.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file +function HEXtoRGB(t){return[(255&t>>16)/255,(255&t>>8)/255,(255&t)/255]}function determineMatrixArrayType(){return PIXI.Matrix="undefined"!=typeof Float32Array?Float32Array:Array,PIXI.Matrix}var PIXI=PIXI||{};PIXI.Point=function(t,e){this.x=t||0,this.y=e||0},PIXI.Point.clone=function(){return new PIXI.Point(this.x,this.y)},PIXI.Point.constructor=PIXI.Point,PIXI.Rectangle=function(t,e,i,r){this.x=t||0,this.y=e||0,this.width=i||0,this.height=r||0},PIXI.Rectangle.clone=function(){return new PIXI.Rectangle(this.x,this.y,this.width,this.height)},PIXI.Rectangle.constructor=PIXI.Rectangle,PIXI.DisplayObject=function(){this.position=new PIXI.Point,this.scale=new PIXI.Point(1,1),this.rotation=0,this.alpha=1,this.visible=!0,this.cacheVisible=!1,this.parent=null,this.stage=null,this.hitArea=null,this.worldAlpha=1,this.color=[],this.worldTransform=PIXI.mat3.create(),this.localTransform=PIXI.mat3.create(),this.dynamic=!0,this._sr=0,this._cr=1,this.renderable=!1,this.interactive=!1,this.buttonMode=!1},PIXI.DisplayObject.constructor=PIXI.DisplayObject,PIXI.DisplayObject.prototype.setInteractive=function(t){this.interactive=t,this.stage&&(this.stage.dirty=!0)},PIXI.DisplayObject.prototype.updateTransform=function(){this.rotation!=this.rotationCache&&(this.rotationCache=this.rotation,this._sr=Math.sin(this.rotation),this._cr=Math.cos(this.rotation));var t=this.localTransform,e=this.parent.worldTransform,i=this.worldTransform;t[0]=this._cr*this.scale.x,t[1]=-this._sr*this.scale.y,t[3]=this._sr*this.scale.x,t[4]=this._cr*this.scale.y,t[2]=this.position.x,t[5]=this.position.y;var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=e[0],u=e[1],d=e[2],l=e[3],I=e[4],f=e[5];i[0]=c*r+u*h,i[1]=c*s+u*a,i[2]=c*n+u*o+d,i[3]=l*r+I*h,i[4]=l*s+I*a,i[5]=l*n+I*o+f,this.worldAlpha=this.alpha*this.parent.worldAlpha},PIXI.DisplayObjectContainer=function(){PIXI.DisplayObject.call(this),this.children=[],this.renderable=!1},PIXI.DisplayObjectContainer.constructor=PIXI.DisplayObjectContainer,PIXI.DisplayObjectContainer.prototype=Object.create(PIXI.DisplayObject.prototype),PIXI.DisplayObjectContainer.prototype.addChild=function(t){void 0!=t.parent&&t.parent.removeChild(t),t.parent=this,t.childIndex=this.children.length,this.children.push(t),this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.addChildAt=function(t,e){if(!(e>=0&&this.children.length>=e))throw Error(t+" The index "+e+" supplied is out of bounds "+this.children.length);void 0!=t.parent&&t.parent.removeChild(t),e==this.children.length?this.children.push(t):this.children.splice(e,0,t),t.parent=this,t.childIndex=e;for(var i=this.children.length,r=e;i>r;r++)this.children[r].childIndex=r;this.stage&&this.stage.__addChild(t)},PIXI.DisplayObjectContainer.prototype.removeChild=function(t){var e=this.children.indexOf(t);if(-1===e)throw Error(t+" The supplied DisplayObject must be a child of the caller "+this);this.stage&&this.stage.__removeChild(t),t.parent=void 0,this.children.splice(e,1);for(var i=e,r=this.children.length;r>i;i++)this.children[i].childIndex-=1},PIXI.DisplayObjectContainer.prototype.updateTransform=function(){if(this.visible){PIXI.DisplayObject.prototype.updateTransform.call(this);for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform()}},PIXI.blendModes={},PIXI.blendModes.NORMAL=0,PIXI.blendModes.SCREEN=1,PIXI.Sprite=function(t){PIXI.DisplayObjectContainer.call(this),this.anchor=new PIXI.Point,this.texture=t,this.blendMode=PIXI.blendModes.NORMAL,this.width=0,this.height=0,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Sprite.constructor=PIXI.Sprite,PIXI.Sprite.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Sprite.prototype.setTexture=function(t){this.texture.baseTexture!=t.baseTexture&&(this.textureChange=!0),this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Sprite.prototype.onTextureUpdate=function(){this.width=this.width||this.texture.frame.width,this.height=this.height||this.texture.frame.height,this.updateFrame=!0},PIXI.Sprite.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache"+this);return new PIXI.Sprite(e)},PIXI.Sprite.fromImage=function(t){var e=PIXI.Texture.fromImage(t);return new PIXI.Sprite(e)},PIXI.MovieClip=function(t){PIXI.Sprite.call(this,t[0]),this.textures=t,this.currentFrame=0,this.animationSpeed=1,this.playing},PIXI.MovieClip.constructor=PIXI.MovieClip,PIXI.MovieClip.prototype=Object.create(PIXI.Sprite.prototype),PIXI.MovieClip.prototype.stop=function(){this.playing=!1},PIXI.MovieClip.prototype.play=function(){this.playing=!0},PIXI.MovieClip.prototype.gotoAndStop=function(t){this.playing=!1,this.currentFrame=t;var e=0|this.currentFrame+.5;this.setTexture(this.textures[e%this.textures.length])},PIXI.MovieClip.prototype.gotoAndPlay=function(t){this.currentFrame=t,this.playing=!0},PIXI.MovieClip.prototype.updateTransform=function(){if(PIXI.Sprite.prototype.updateTransform.call(this),this.playing){this.currentFrame+=this.animationSpeed;var t=0|this.currentFrame+.5;this.setTexture(this.textures[t%this.textures.length])}},PIXI.InteractionManager=function(t){this.stage=t,this.tempPoint=new PIXI.Point,this.mouseoverEnabled=!0,this.mouse=new PIXI.InteractionData,this.touchs={},this.pool=[],this.interactiveItems=[],this.last=0},PIXI.InteractionManager.constructor=PIXI.InteractionManager,PIXI.InteractionManager.prototype.collectInteractiveSprite=function(t,e){for(var i=t.children,r=i.length,s=r-1;s>=0;s--){var n=i[s];n.interactive?(e.interactiveChildren=!0,this.interactiveItems.push(n),n.children.length>0&&this.collectInteractiveSprite(n,n)):(n.__iParent=null,n.children.length>0&&this.collectInteractiveSprite(n,e))}},PIXI.InteractionManager.prototype.setTarget=function(t){this.target=t,t.view.addEventListener("mousemove",this.onMouseMove.bind(this),!0),t.view.addEventListener("mousedown",this.onMouseDown.bind(this),!0),document.body.addEventListener("mouseup",this.onMouseUp.bind(this),!0),t.view.addEventListener("mouseout",this.onMouseUp.bind(this),!0),t.view.addEventListener("touchstart",this.onTouchStart.bind(this),!0),t.view.addEventListener("touchend",this.onTouchEnd.bind(this),!0),t.view.addEventListener("touchmove",this.onTouchMove.bind(this),!0)},PIXI.InteractionManager.prototype.update=function(){var t=Date.now(),e=t-this.last;if(e=30*e/1e3,!(1>e)){if(this.last=t,this.dirty){this.dirty=!1,this.interactiveItems.length;for(var i=0;this.interactiveItems.length>i;i++)this.interactiveItems[i].interactiveChildren=!0;this.interactiveItems=[],this.stage.interactive&&this.interactiveItems.push(this.stage),this.collectInteractiveSprite(this.stage,this.stage)}for(var r=this.interactiveItems.length,i=0;r>i;i++){var s=this.interactiveItems[i];s.visible&&(s.mouseover||s.mouseout||s.buttonMode)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit?s.__isOver||(s.buttonMode&&(this.target.view.style.cursor="pointer"),s.mouseover&&s.mouseover(this.mouse),s.__isOver=!0):s.__isOver&&(s.buttonMode&&(this.target.view.style.cursor="default"),s.mouseout&&s.mouseout(this.mouse),s.__isOver=!1))}}},PIXI.InteractionManager.prototype.onMouseMove=function(t){t.preventDefault();var e=this.target.view.getBoundingClientRect();this.mouse.global.x=(t.clientX-e.left)*(this.target.width/e.width),this.mouse.global.y=(t.clientY-e.top)*(this.target.height/e.height);var i=this.interactiveItems.length;this.mouse.global;for(var r=0;i>r;r++){var s=this.interactiveItems[r];s.mousemove&&s.mousemove(this.mouse)}},PIXI.InteractionManager.prototype.onMouseDown=function(t){t.preventDefault();var e=this.interactiveItems.length;this.mouse.global,this.stage;for(var i=0;e>i;i++){var r=this.interactiveItems[i];if((r.mousedown||r.click)&&(r.__mouseIsDown=!0,r.__hit=this.hitTest(r,this.mouse),r.__hit&&(r.mousedown&&r.mousedown(this.mouse),r.__isDown=!0,!r.interactiveChildren)))break}},PIXI.InteractionManager.prototype.onMouseUp=function(t){t.preventDefault(),this.mouse.global;for(var e=this.interactiveItems.length,i=!1,r=0;e>r;r++){var s=this.interactiveItems[r];(s.mouseup||s.mouseupoutside||s.click)&&(s.__hit=this.hitTest(s,this.mouse),s.__hit&&!i?(s.mouseup&&s.mouseup(this.mouse),s.__isDown&&s.click&&s.click(this.mouse),s.interactiveChildren||(i=!0)):s.__isDown&&s.mouseupoutside&&s.mouseupoutside(this.mouse),s.__isDown=!1)}},PIXI.InteractionManager.prototype.hitTest=function(t,e){var i=e.global;if(!t.visible)return!1;if(t instanceof PIXI.Sprite){var r=t.worldTransform,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=-t.width*t.anchor.x;if(d>I&&I+t.width>d){var f=-t.height*t.anchor.y;if(l>f&&f+t.height>l)return!0}}else if(t.hitArea){var r=t.worldTransform,p=t.hitArea,s=r[0],n=r[1],h=r[2],a=r[3],o=r[4],c=r[5],u=1/(s*o+n*-a),d=o*u*i.x+-n*u*i.y+(c*n-h*o)*u,l=s*u*i.y+-a*u*i.x+(-c*s+h*a)*u,I=p.x;if(d>I&&I+p.width>d){var f=p.y;if(l>f&&f+p.height>l)return!0}}for(var v=t.children.length,g=0;v>g;g++){var t=t.children[g],x=this.hitTest(t,e);if(x)return!0}return!1},PIXI.InteractionManager.prototype.onTouchMove=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier];n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height)}for(var h=this.interactiveItems.length,r=0;h>r;r++){var a=this.interactiveItems[r];a.touchmove&&a.touchmove(n)}},PIXI.InteractionManager.prototype.onTouchStart=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.pool.pop();n||(n=new PIXI.InteractionData),this.touchs[s.identifier]=n,n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var h=this.interactiveItems.length,a=0;h>a;a++){var o=this.interactiveItems[a];if((o.touchstart||o.tap)&&(o.__hit=this.hitTest(o,n),o.__hit&&(o.touchstart&&o.touchstart(n),o.__isDown=!0,!o.interactiveChildren)))break}}},PIXI.InteractionManager.prototype.onTouchEnd=function(t){t.preventDefault();for(var e=this.target.view.getBoundingClientRect(),i=t.changedTouches,r=0;i.length>r;r++){var s=i[r],n=this.touchs[s.identifier],h=!1;n.global.x=(s.clientX-e.left)*(this.target.width/e.width),n.global.y=(s.clientY-e.top)*(this.target.height/e.height);for(var a=this.interactiveItems.length,o=0;a>o;o++){var c=this.interactiveItems[o];c.__hit=this.hitTest(c,n),itemTouchData==n&&((c.touchend||c.tap)&&(c.__hit&&!h?(c.touchend&&c.touchend(n),c.__isDown&&c.tap&&c.tap(n),c.interactiveChildren||(h=!0)):c.__isDown&&c.touchendoutside&&c.touchendoutside(n),c.__isDown=!1),c.__touchIdentifier=null)}this.pool.push(n),this.touchs[s.identifier]=null}},PIXI.InteractionData=function(){this.global=new PIXI.Point,this.local=new PIXI.Point,this.target},PIXI.InteractionData.prototype.getLocalPosition=function(t){var e=t.worldTransform,i=this.global,r=e[0],s=e[1],n=e[2],h=e[3],a=e[4],o=e[5],c=1/(r*a+s*-h);return new PIXI.Point(a*c*i.x+-s*c*i.y+(o*s-n*a)*c,r*c*i.y+-h*c*i.x+(-o*r+n*h)*c)},PIXI.InteractionData.constructor=PIXI.InteractionData,PIXI.Stage=function(t,e){PIXI.DisplayObjectContainer.call(this),this.worldTransform=PIXI.mat3.create(),this.__childrenAdded=[],this.__childrenRemoved=[],this.childIndex=0,this.stage=this,this.stage.hitArea=new PIXI.Rectangle(0,0,1e5,1e5),this.interactive=!!e,this.interactionManager=new PIXI.InteractionManager(this),this.setBackgroundColor(t)},PIXI.Stage.constructor=PIXI.Stage,PIXI.Stage.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Stage.prototype.updateTransform=function(){this.worldAlpha=1;for(var t=0,e=this.children.length;e>t;t++)this.children[t].updateTransform();this.dirty&&(this.dirty=!1,this.interactionManager.dirty=!0),this.interactive&&this.interactionManager.update()},PIXI.Stage.prototype.setBackgroundColor=function(t){this.backgroundColor=t||0,this.backgroundColorSplit=HEXtoRGB(this.backgroundColor),this.backgroundColorString="#"+this.backgroundColor.toString(16)},PIXI.Stage.prototype.__addChild=function(t){if(t.interactive&&(this.dirty=!0),t.stage=this,t.children)for(var e=0;t.children.length>e;e++)this.__addChild(t.children[e])},PIXI.Stage.prototype.__removeChild=function(t){if(t.interactive&&(this.dirty=!0),this.__childrenRemoved.push(t),t.stage=void 0,t.children)for(var e=0,i=t.children.length;i>e;e++)this.__removeChild(t.children[e])},window.requestAnimFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)}}(),"function"!=typeof Function.prototype.bind&&(Function.prototype.bind=function(){var t=Array.prototype.slice;return function(e){function i(){var n=s.concat(t.call(arguments));r.apply(this instanceof i?this:e,n)}var r=this,s=t.call(arguments,1);if("function"!=typeof r)throw new TypeError;return i.prototype=function n(t){return t&&(n.prototype=t),this instanceof n?void 0:new n}(r.prototype),i}}());var AjaxRequest=function(){var t=["Msxml2.XMLHTTP","Microsoft.XMLHTTP"];if(!window.ActiveXObject)return window.XMLHttpRequest?new XMLHttpRequest:!1;for(var e=0;t.length>e;e++)try{return new ActiveXObject(t[e])}catch(i){}};PIXI.EventTarget=function(){var t={};this.addEventListener=this.on=function(e,i){void 0===t[e]&&(t[e]=[]),-1===t[e].indexOf(i)&&t[e].push(i)},this.dispatchEvent=this.emit=function(e){for(var i in t[e.type])t[e.type][i](e)},this.removeEventListener=this.off=function(e,i){var r=t[e].indexOf(i);-1!==r&&t[e].splice(r,1)}},determineMatrixArrayType(),PIXI.mat3={},PIXI.mat3.create=function(){var t=new PIXI.Matrix(9);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=1,t[5]=0,t[6]=0,t[7]=0,t[8]=1,t},PIXI.mat4={},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat3.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=e[0],I=e[1],f=e[2],p=e[3],v=e[4],g=e[5],x=e[6],P=e[7],b=e[8];return i[0]=l*r+I*h+f*c,i[1]=l*s+I*a+f*u,i[2]=l*n+I*o+f*d,i[3]=p*r+v*h+g*c,i[4]=p*s+v*a+g*u,i[5]=p*n+v*o+g*d,i[6]=x*r+P*h+b*c,i[7]=x*s+P*a+b*u,i[8]=x*n+P*o+b*d,i},PIXI.mat3.toMat4=function(t,e){return e||(e=PIXI.mat4.create()),e[15]=1,e[14]=0,e[13]=0,e[12]=0,e[11]=0,e[10]=t[8],e[9]=t[7],e[8]=t[6],e[7]=0,e[6]=t[5],e[5]=t[4],e[4]=t[3],e[3]=0,e[2]=t[2],e[1]=t[1],e[0]=t[0],e},PIXI.mat4.create=function(){var t=new PIXI.Matrix(16);return t[0]=1,t[1]=0,t[2]=0,t[3]=0,t[4]=0,t[5]=1,t[6]=0,t[7]=0,t[8]=0,t[9]=0,t[10]=1,t[11]=0,t[12]=0,t[13]=0,t[14]=0,t[15]=1,t},PIXI.mat4.transpose=function(t,e){if(!e||t===e){var i=t[1],r=t[2],s=t[3],n=t[6],h=t[7],a=t[11];return t[1]=t[4],t[2]=t[8],t[3]=t[12],t[4]=i,t[6]=t[9],t[7]=t[13],t[8]=r,t[9]=n,t[11]=t[14],t[12]=s,t[13]=h,t[14]=a,t}return e[0]=t[0],e[1]=t[4],e[2]=t[8],e[3]=t[12],e[4]=t[1],e[5]=t[5],e[6]=t[9],e[7]=t[13],e[8]=t[2],e[9]=t[6],e[10]=t[10],e[11]=t[14],e[12]=t[3],e[13]=t[7],e[14]=t[11],e[15]=t[15],e},PIXI.mat4.multiply=function(t,e,i){i||(i=t);var r=t[0],s=t[1],n=t[2],h=t[3],a=t[4],o=t[5],c=t[6],u=t[7],d=t[8],l=t[9],I=t[10],f=t[11],p=t[12],v=t[13],g=t[14],x=t[15],P=e[0],b=e[1],m=e[2],_=e[3];return i[0]=P*r+b*a+m*d+_*p,i[1]=P*s+b*o+m*l+_*v,i[2]=P*n+b*c+m*I+_*g,i[3]=P*h+b*u+m*f+_*x,P=e[4],b=e[5],m=e[6],_=e[7],i[4]=P*r+b*a+m*d+_*p,i[5]=P*s+b*o+m*l+_*v,i[6]=P*n+b*c+m*I+_*g,i[7]=P*h+b*u+m*f+_*x,P=e[8],b=e[9],m=e[10],_=e[11],i[8]=P*r+b*a+m*d+_*p,i[9]=P*s+b*o+m*l+_*v,i[10]=P*n+b*c+m*I+_*g,i[11]=P*h+b*u+m*f+_*x,P=e[12],b=e[13],m=e[14],_=e[15],i[12]=P*r+b*a+m*d+_*p,i[13]=P*s+b*o+m*l+_*v,i[14]=P*n+b*c+m*I+_*g,i[15]=P*h+b*u+m*f+_*x,i},PIXI.autoDetectRenderer=function(t,e,i,r){t||(t=800),e||(e=600);var s=function(){try{return!!window.WebGLRenderingContext&&!!document.createElement("canvas").getContext("experimental-webgl")}catch(t){return!1}}();return s?new PIXI.WebGLRenderer(t,e,i,r):new PIXI.CanvasRenderer(t,e,i,r)},PIXI.shaderFragmentSrc=["precision mediump float;","varying vec2 vTextureCoord;","varying float vColor;","uniform sampler2D uSampler;","void main(void) {","gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.x, vTextureCoord.y));","gl_FragColor = gl_FragColor * vColor;","}"],PIXI.shaderVertexSrc=["attribute vec2 aVertexPosition;","attribute vec2 aTextureCoord;","attribute float aColor;","uniform mat4 uMVMatrix;","varying vec2 vTextureCoord;","varying float vColor;","void main(void) {","gl_Position = uMVMatrix * vec4(aVertexPosition, 1.0, 1.0);","vTextureCoord = aTextureCoord;","vColor = aColor;","}"],PIXI.CompileVertexShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.VERTEX_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI.CompileFragmentShader=function(t,e){for(var i="",r=0;e.length>r;r++)i+=e[r];var s;return s=t.createShader(t.FRAGMENT_SHADER),t.shaderSource(s,i),t.compileShader(s),t.getShaderParameter(s,t.COMPILE_STATUS)?s:(alert(t.getShaderInfoLog(s)),null)},PIXI._defaultFrame=new PIXI.Rectangle(0,0,1,1),PIXI.WebGLRenderer=function(t,e,i,r){this.transparent=!!r,this.width=t||800,this.height=e||600,this.view=i||document.createElement("canvas"),this.view.width=this.width,this.view.height=this.height;var s=this;this.view.addEventListener("webglcontextlost",function(t){s.handleContextLost(t)},!1),this.view.addEventListener("webglcontextrestored",function(t){s.handleContextRestored(t)},!1),this.batchs=[];try{this.gl=this.view.getContext("experimental-webgl",{alpha:this.transparent,antialias:!1,premultipliedAlpha:!0})}catch(n){throw Error(" This browser does not support webGL. Try using the canvas renderer"+this)}this.initShaders();var h=this.gl;this.batch=new PIXI.WebGLBatch(h),h.disable(h.DEPTH_TEST),h.enable(h.BLEND),h.colorMask(!0,!0,!0,this.transparent),this.projectionMatrix=PIXI.mat4.create(),this.resize(this.width,this.height),this.contextLost=!1},PIXI.WebGLRenderer.constructor=PIXI.WebGLRenderer,PIXI.WebGLRenderer.prototype.initShaders=function(){var t=this.gl,e=PIXI.CompileFragmentShader(t,PIXI.shaderFragmentSrc),i=PIXI.CompileVertexShader(t,PIXI.shaderVertexSrc);this.shaderProgram=t.createProgram();var r=this.shaderProgram;t.attachShader(r,i),t.attachShader(r,e),t.linkProgram(r),t.getProgramParameter(r,t.LINK_STATUS)||alert("Could not initialise shaders"),t.useProgram(r),r.vertexPositionAttribute=t.getAttribLocation(r,"aVertexPosition"),t.enableVertexAttribArray(r.vertexPositionAttribute),r.textureCoordAttribute=t.getAttribLocation(r,"aTextureCoord"),t.enableVertexAttribArray(r.textureCoordAttribute),r.colorAttribute=t.getAttribLocation(r,"aColor"),t.enableVertexAttribArray(r.colorAttribute),r.mvMatrixUniform=t.getUniformLocation(r,"uMVMatrix"),r.samplerUniform=t.getUniformLocation(r,"uSampler"),PIXI.shaderProgram=this.shaderProgram},PIXI.WebGLRenderer.prototype.checkVisibility=function(t,e){for(var i=t.children,r=0;i.length>r;r++){var s=i[r],n=s.visible&&e;s.textureChange&&(s.textureChange=!1,n&&(this.removeDisplayObject(s),this.addDisplayObject(s))),s.cacheVisible!=n&&(s.cacheVisible=n,s.cacheVisible?this.addDisplayObject(s):this.removeDisplayObject(s)),s.children.length>0&&this.checkVisibility(s,n)}},PIXI.WebGLRenderer.prototype.render=function(t){if(!this.contextLost){this.__stage!==t&&(this.__stage&&this.checkVisibility(this.__stage,!1),this.__stage=t);for(var e=0;t.__childrenRemoved.length>e;e++)this.removeDisplayObject(t.__childrenRemoved[e]);for(var e=0;PIXI.texturesToUpdate.length>e;e++)this.updateTexture(PIXI.texturesToUpdate[e]);t.__childrenRemoved=[],t.__childrenAdded=[],PIXI.texturesToUpdate=[],this.checkVisibility(t,!0),t.updateTransform();var i=this.gl;i.clear(i.COLOR_BUFFER_BIT),i.clearColor(t.backgroundColorSplit[0],t.backgroundColorSplit[1],t.backgroundColorSplit[2],0),i.blendFunc(i.ONE,i.ONE_MINUS_SRC_ALPHA),i.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix);for(var r,e=0;this.batchs.length>e;e++)r=this.batchs[e],r instanceof PIXI.WebGLBatch?this.batchs[e].render():r instanceof PIXI.Strip&&r.visible&&this.renderStrip(r);t.interactive&&(t._interactiveEventsAdded||(t._interactiveEventsAdded=!0,t.interactionManager.setTarget(this)))}},PIXI.WebGLRenderer.prototype.updateTexture=function(t){var e=this.gl;t._glTexture||(t._glTexture=e.createTexture()),t.hasLoaded&&(e.bindTexture(e.TEXTURE_2D,t._glTexture),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!0),e.texImage2D(e.TEXTURE_2D,0,e.RGBA,e.RGBA,e.UNSIGNED_BYTE,t.source),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MAG_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_MIN_FILTER,e.LINEAR),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_S,e.CLAMP_TO_EDGE),e.texParameteri(e.TEXTURE_2D,e.TEXTURE_WRAP_T,e.CLAMP_TO_EDGE),e.bindTexture(e.TEXTURE_2D,null)),this.refreshBatchs=!0},PIXI.WebGLRenderer.prototype.addDisplayObject=function(t){if(t.stage&&!t.__inWebGL&&(t.batch=null,t.renderable)){t.__inWebGL=!0;var e=t;do{if(0==e.childIndex)e=e.parent;else for(e=e.parent.children[e.childIndex-1];0!=e.children.length;)e=e.children[e.children.length-1];if(e==t.stage)break}while(!e.renderable||!e.__inWebGL);var i=t;do{if(0==i.children.length){for(;i.childIndex==i.parent.children.length-1;)if(i=i.parent,i==t.stage){i=null;break}i&&(i=i.parent.children[i.childIndex+1])}else i=i.children[0];if(!i)break}while(!i.renderable||!i.__inWebGL);if(t instanceof PIXI.Sprite){var r,s;if(e instanceof PIXI.Sprite){if(r=e.batch,r&&r.texture==t.texture.baseTexture&&r.blendMode==t.blendMode)return r.insertAfter(t,e),void 0}else r=e;if(i)if(i instanceof PIXI.Sprite){if(s=i.batch){if(s.texture==t.texture.baseTexture&&s.blendMode==t.blendMode)return s.insertBefore(t,i),void 0;if(s==r){var n=r.split(i),h=PIXI._getBatch(this.gl),a=this.batchs.indexOf(r);return h.init(t),this.batchs.splice(a+1,0,h,n),void 0}}}else s=i;var h=PIXI._getBatch(this.gl);if(h.init(t),r){var a=this.batchs.indexOf(r);this.batchs.splice(a+1,0,h)}else this.batchs.push(h)}else t instanceof PIXI.Strip&&(this.initStrip(t),this.batchs.push(t));this.batchUpdate=!0}},PIXI.WebGLRenderer.prototype.removeDisplayObject=function(t){if(t.cacheVisible=!1,t.renderable){t.__inWebGL=!1;var e;if(t instanceof PIXI.Sprite){var i=t.batch;if(!i)return;i.remove(t),0==i.size&&(e=i)}else e=t;if(e){var r=this.batchs.indexOf(e);if(-1==r)return;if(0==r||r==this.batchs.length-1)return this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),void 0;if(this.batchs[r-1]instanceof PIXI.WebGLBatch&&this.batchs[r+1]instanceof PIXI.WebGLBatch&&this.batchs[r-1].texture==this.batchs[r+1].texture&&this.batchs[r-1].blendMode==this.batchs[r+1].blendMode)return this.batchs[r-1].merge(this.batchs[r+1]),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e),PIXI._returnBatch(this.batchs[r+1]),this.batchs.splice(r,2),void 0;this.batchs.splice(r,1),e instanceof PIXI.WebGLBatch&&PIXI._returnBatch(e)}}},PIXI.WebGLRenderer.prototype.resize=function(t,e){this.width=t,this.height=e,this.view.width=t,this.view.height=e,this.gl.viewport(0,0,this.width,this.height);var i=this.projectionMatrix;i[0]=2/this.width,i[5]=-2/this.height,i[12]=-1,i[13]=1},PIXI.WebGLRenderer.prototype.initStrip=function(t){var e=this.gl;this.shaderProgram,t._vertexBuffer=e.createBuffer(),t._indexBuffer=e.createBuffer(),t._uvBuffer=e.createBuffer(),t._colorBuffer=e.createBuffer(),e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.DYNAMIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)},PIXI.WebGLRenderer.prototype.renderStrip=function(t){var e=this.gl,i=this.shaderProgram,r=PIXI.mat3.toMat4(t.worldTransform);PIXI.mat4.transpose(r),PIXI.mat4.multiply(this.projectionMatrix,r,r),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,r),t.blendMode==PIXI.blendModes.NORMAL?e.blendFunc(e.ONE,e.ONE_MINUS_SRC_ALPHA):e.blendFunc(e.ONE,e.ONE_MINUS_SRC_COLOR),t.dirty?(t.dirty=!1,e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferData(e.ARRAY_BUFFER,t.verticies,e.STATIC_DRAW),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.bufferData(e.ARRAY_BUFFER,t.uvs,e.STATIC_DRAW),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.bufferData(e.ARRAY_BUFFER,t.colors,e.STATIC_DRAW),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer),e.bufferData(e.ELEMENT_ARRAY_BUFFER,t.indices,e.STATIC_DRAW)):(e.bindBuffer(e.ARRAY_BUFFER,t._vertexBuffer),e.bufferSubData(e.ARRAY_BUFFER,0,t.verticies),e.vertexAttribPointer(i.vertexPositionAttribute,2,e.FLOAT,!1,0,0),e.bindBuffer(e.ARRAY_BUFFER,t._uvBuffer),e.vertexAttribPointer(i.textureCoordAttribute,2,e.FLOAT,!1,0,0),e.activeTexture(e.TEXTURE0),e.bindTexture(e.TEXTURE_2D,t.texture.baseTexture._glTexture),e.bindBuffer(e.ARRAY_BUFFER,t._colorBuffer),e.vertexAttribPointer(i.colorAttribute,1,e.FLOAT,!1,0,0),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,t._indexBuffer)),e.drawElements(e.TRIANGLE_STRIP,t.indices.length,e.UNSIGNED_SHORT,0),e.uniformMatrix4fv(this.shaderProgram.mvMatrixUniform,!1,this.projectionMatrix)},PIXI.WebGLRenderer.prototype.handleContextLost=function(t){t.preventDefault(),this.contextLost=!0},PIXI.WebGLRenderer.prototype.handleContextRestored=function(){this.gl=this.view.getContext("experimental-webgl",{alpha:!0}),this.initShaders();for(var t=0;PIXI.TextureCache.length>t;t++)this.updateTexture(PIXI.TextureCache[t]);for(var t=0;this.batchs.length>t;t++)this.batchs[t].restoreLostContext(this.gl),this.batchs[t].dirty=!0;PIXI._restoreBatchs(this.gl),this.contextLost=!1},PIXI._batchs=[],PIXI._getBatch=function(t){return 0==PIXI._batchs.length?new PIXI.WebGLBatch(t):PIXI._batchs.pop()},PIXI._returnBatch=function(t){t.clean(),PIXI._batchs.push(t)},PIXI._restoreBatchs=function(t){for(var e=0;PIXI._batchs.length>e;e++)PIXI._batchs[e].restoreLostContext(t)},PIXI.WebGLBatch=function(t){this.gl=t,this.size=0,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer(),this.blendMode=PIXI.blendModes.NORMAL,this.dynamicSize=1},PIXI.WebGLBatch.constructor=PIXI.WebGLBatch,PIXI.WebGLBatch.prototype.clean=function(){this.verticies=[],this.uvs=[],this.indices=[],this.colors=[],this.dynamicSize=1,this.texture=null,this.last=null,this.size=0,this.head,this.tail},PIXI.WebGLBatch.prototype.restoreLostContext=function(t){this.gl=t,this.vertexBuffer=t.createBuffer(),this.indexBuffer=t.createBuffer(),this.uvBuffer=t.createBuffer(),this.colorBuffer=t.createBuffer()},PIXI.WebGLBatch.prototype.init=function(t){t.batch=this,this.dirty=!0,this.blendMode=t.blendMode,this.texture=t.texture.baseTexture,this.head=t,this.tail=t,this.size=1,this.growBatch()},PIXI.WebGLBatch.prototype.insertBefore=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__prev;e.__prev=t,t.__next=e,i?(t.__prev=i,i.__next=t):this.head=t},PIXI.WebGLBatch.prototype.insertAfter=function(t,e){this.size++,t.batch=this,this.dirty=!0;var i=e.__next;e.__next=t,t.__prev=e,i?(t.__next=i,i.__prev=t):this.tail=t},PIXI.WebGLBatch.prototype.remove=function(t){return this.size--,0==this.size?(t.batch=null,t.__prev=null,t.__next=null,void 0):(t.__prev?t.__prev.__next=t.__next:(this.head=t.__next,this.head.__prev=null),t.__next?t.__next.__prev=t.__prev:(this.tail=t.__prev,this.tail.__next=null),t.batch=null,t.__next=null,t.__prev=null,this.dirty=!0,void 0)},PIXI.WebGLBatch.prototype.split=function(t){this.dirty=!0;var e=new PIXI.WebGLBatch(this.gl);e.init(t),e.tail=this.tail,this.tail=t.__prev,this.tail.__next=null,t.__prev=null;for(var i=0;t;)i++,t.batch=e,t=t.__next;return e.size=i,this.size-=i,e},PIXI.WebGLBatch.prototype.merge=function(t){this.dirty=!0,this.tail.__next=t.head,t.head.__prev=this.tail,this.size+=t.size,this.tail=t.tail;for(var e=t.head;e;)e.batch=this,e=e.__next},PIXI.WebGLBatch.prototype.growBatch=function(){var t=this.gl;this.dynamicSize=1==this.size?1:1.5*this.size,this.verticies=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.vertexBuffer),t.bufferData(t.ARRAY_BUFFER,this.verticies,t.DYNAMIC_DRAW),this.uvs=new Float32Array(8*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.uvBuffer),t.bufferData(t.ARRAY_BUFFER,this.uvs,t.DYNAMIC_DRAW),this.dirtyUVS=!0,this.colors=new Float32Array(4*this.dynamicSize),t.bindBuffer(t.ARRAY_BUFFER,this.colorBuffer),t.bufferData(t.ARRAY_BUFFER,this.colors,t.DYNAMIC_DRAW),this.dirtyColors=!0,this.indices=new Uint16Array(6*this.dynamicSize);for(var e=this.indices.length/6,i=0;e>i;i++){var r=6*i,s=4*i;this.indices[r+0]=s+0,this.indices[r+1]=s+1,this.indices[r+2]=s+2,this.indices[r+3]=s+0,this.indices[r+4]=s+2,this.indices[r+5]=s+3}t.bindBuffer(t.ELEMENT_ARRAY_BUFFER,this.indexBuffer),t.bufferData(t.ELEMENT_ARRAY_BUFFER,this.indices,t.STATIC_DRAW)},PIXI.WebGLBatch.prototype.refresh=function(){this.gl,this.dynamicSizen;n++)this.renderDisplayObject(t.children[n])}},PIXI.CanvasRenderer.prototype.renderStripFlat=function(t){var e=this.context,i=t.verticies;t.uvs;var r=i.length/2;this.count++,e.beginPath();for(var s=1;r-2>s;s++){var n=2*s,h=i[n],a=i[n+2],o=i[n+4],c=i[n+1],u=i[n+3],d=i[n+5];e.moveTo(h,c),e.lineTo(a,u),e.lineTo(o,d)}e.fillStyle="#FF0000",e.fill(),e.closePath()},PIXI.CanvasRenderer.prototype.renderStrip=function(t){var e=this.context,i=t.verticies,r=t.uvs,s=i.length/2;this.count++;for(var n=1;s-2>n;n++){var h=2*n,a=i[h],o=i[h+2],c=i[h+4],u=i[h+1],d=i[h+3],l=i[h+5],I=r[h]*t.texture.width,f=r[h+2]*t.texture.width,p=r[h+4]*t.texture.width,v=r[h+1]*t.texture.height,g=r[h+3]*t.texture.height,x=r[h+5]*t.texture.height;e.save(),e.beginPath(),e.moveTo(a,u),e.lineTo(o,d),e.lineTo(c,l),e.closePath(),e.clip();var P=I*g+v*p+f*x-g*p-v*f-I*x,b=a*g+v*c+o*x-g*c-v*o-a*x,m=I*o+a*p+f*c-o*p-a*f-I*c,_=I*g*c+v*o*p+a*f*x-a*g*p-v*f*c-I*o*x,X=u*g+v*l+d*x-g*l-v*d-u*x,y=I*d+u*p+f*l-d*p-u*f-I*l,T=I*g*l+v*d*p+u*f*x-u*g*p-v*f*l-I*d*x;e.transform(b/P,X/P,m/P,y/P,_/P,T/P),e.drawImage(t.texture.baseTexture.source,0,0),e.restore()}},PIXI.Strip=function(t,e,i){PIXI.DisplayObjectContainer.call(this),this.texture=t,this.blendMode=PIXI.blendModes.NORMAL;try{this.uvs=new Float32Array([0,1,1,1,1,0,0,1]),this.verticies=new Float32Array([0,0,0,0,0,0,0,0,0]),this.colors=new Float32Array([1,1,1,1]),this.indices=new Uint16Array([0,1,2,3])}catch(r){this.uvs=[0,1,1,1,1,0,0,1],this.verticies=[0,0,0,0,0,0,0,0,0],this.colors=[1,1,1,1],this.indices=[0,1,2,3]}this.width=e,this.height=i,t.baseTexture.hasLoaded?(this.width=this.texture.frame.width,this.height=this.texture.frame.height,this.updateFrame=!0):(this.onTextureUpdateBind=this.onTextureUpdate.bind(this),this.texture.addEventListener("update",this.onTextureUpdateBind)),this.renderable=!0},PIXI.Strip.constructor=PIXI.Strip,PIXI.Strip.prototype=Object.create(PIXI.DisplayObjectContainer.prototype),PIXI.Strip.prototype.setTexture=function(t){this.texture=t,this.width=t.frame.width,this.height=t.frame.height,this.updateFrame=!0},PIXI.Strip.prototype.onTextureUpdate=function(){this.updateFrame=!0},PIXI.Rope=function(t,e){PIXI.Strip.call(this,t),this.points=e;try{this.verticies=new Float32Array(4*e.length),this.uvs=new Float32Array(4*e.length),this.colors=new Float32Array(2*e.length),this.indices=new Uint16Array(2*e.length)}catch(i){this.verticies=verticies,this.uvs=uvs,this.colors=colors,this.indices=indices}this.refresh()},PIXI.Rope.constructor=PIXI.Rope,PIXI.Rope.prototype=Object.create(PIXI.Strip.prototype),PIXI.Rope.prototype.refresh=function(){var t=this.points;if(!(1>t.length)){var e=this.uvs,i=this.indices,r=this.colors,s=t[0],n=t[0];this.count-=.2,e[0]=0,e[1]=1,e[2]=0,e[3]=1,r[0]=1,r[1]=1,i[0]=0,i[1]=1;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a,c=a/(h-1);a%2?(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1):(e[o]=c,e[o+1]=0,e[o+2]=c,e[o+3]=1),o=2*a,r[o]=1,r[o+1]=1,o=2*a,i[o]=o,i[o+1]=o+1,s=n}}},PIXI.Rope.prototype.updateTransform=function(){var t=this.points;if(!(1>t.length)){var e,i=this.verticies,r=t[0],s={x:0,y:0},n=t[0];this.count-=.2,i[0]=n.x+s.x,i[1]=n.y+s.y,i[2]=n.x-s.x,i[3]=n.y-s.y;for(var h=t.length,a=1;h>a;a++){var n=t[a],o=4*a;e=t.length-1>a?t[a+1]:n,s.y=-(e.x-r.x),s.x=e.y-r.y;var c=10*(1-a/(h-1));c>1&&(c=1);var u=Math.sqrt(s.x*s.x+s.y*s.y),d=this.texture.height/2;s.x/=u,s.y/=u,s.x*=d,s.y*=d,i[o]=n.x+s.x,i[o+1]=n.y+s.y,i[o+2]=n.x-s.x,i[o+3]=n.y-s.y,r=n}PIXI.DisplayObjectContainer.prototype.updateTransform.call(this)}},PIXI.Rope.prototype.setTexture=function(t){this.texture=t,this.updateFrame=!0},PIXI.BaseTextureCache={},PIXI.texturesToUpdate=[],PIXI.BaseTexture=function(t){if(PIXI.EventTarget.call(this),this.width=100,this.height=100,this.source=t,this.source instanceof Image)if(this.source.complete)this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this);else{var e=this;this.source.onload=function(){e.hasLoaded=!0,e.width=e.source.width,e.height=e.source.height,PIXI.texturesToUpdate.push(e),e.dispatchEvent({type:"loaded",content:e})}}else this.hasLoaded=!0,this.width=this.source.width,this.height=this.source.height,PIXI.texturesToUpdate.push(this)},PIXI.BaseTexture.constructor=PIXI.BaseTexture,PIXI.BaseTexture.prototype.fromImage=function(){},PIXI.TextureCache={},PIXI.FrameCache={},PIXI.Texture=function(t,e){if(PIXI.EventTarget.call(this),e||(this.noFrame=!0,e=new PIXI.Rectangle(0,0,1,1)),this.trim=new PIXI.Point,this.baseTexture=t,this.frame=e,this.scope=this,t.hasLoaded)this.noFrame&&(e=new PIXI.Rectangle(0,0,t.width,t.height)),this.setFrame(e);else{var i=this;t.addEventListener("loaded",function(){i.onBaseTextureLoaded()})}},PIXI.Texture.constructor=PIXI.Texture,PIXI.Texture.prototype.onBaseTextureLoaded=function(){var t=this.baseTexture;t.removeEventListener("loaded",this.onLoaded),this.noFrame&&(this.frame=new PIXI.Rectangle(0,0,t.width,t.height)),this.noFrame=!1,this.width=this.frame.width,this.height=this.frame.height,this.scope.dispatchEvent({type:"update",content:this})},PIXI.Texture.prototype.setFrame=function(t){if(this.frame=t,this.width=t.width,this.height=t.height,t.x+t.width>this.baseTexture.width||t.y+t.height>this.baseTexture.height)throw Error("Texture Error: frame does not fit inside the base Texture dimensions "+this)},PIXI.Texture.fromImage=function(t,e){var i=PIXI.TextureCache[t];if(!i){var r=PIXI.BaseTextureCache[t];if(!r){var s=new Image;e&&(s.crossOrigin=""),s.src=t,r=new PIXI.BaseTexture(s),PIXI.BaseTextureCache[t]=r}i=new PIXI.Texture(r),PIXI.TextureCache[t]=i}return i},PIXI.Texture.fromFrame=function(t){var e=PIXI.TextureCache[t];if(!e)throw Error("The frameId '"+t+"' does not exist in the texture cache "+this);return e},PIXI.Texture.fromCanvas=function(t){var e=new PIXI.BaseTexture(t);return new PIXI.Texture(e)},PIXI.Texture.addTextureToCache=function(t,e){PIXI.TextureCache[e]=t},PIXI.Texture.removeTextureFromCache=function(t){var e=PIXI.TextureCache[t];return PIXI.TextureCache[t]=null,e},PIXI.SpriteSheetLoader=function(t){PIXI.EventTarget.call(this),this.url=t,this.baseUrl=t.replace(/[^\/]*$/,""),this.texture,this.frames={},this.crossorigin=!1},PIXI.SpriteSheetLoader.constructor=PIXI.SpriteSheetLoader,PIXI.SpriteSheetLoader.prototype.load=function(){this.ajaxRequest=new AjaxRequest;var t=this;this.ajaxRequest.onreadystatechange=function(){t.onLoaded()},this.ajaxRequest.open("GET",this.url,!0),this.ajaxRequest.overrideMimeType&&this.ajaxRequest.overrideMimeType("application/json"),this.ajaxRequest.send(null)},PIXI.SpriteSheetLoader.prototype.onLoaded=function(){if(4==this.ajaxRequest.readyState&&(200==this.ajaxRequest.status||-1==window.location.href.indexOf("http"))){var jsondata=eval("("+this.ajaxRequest.responseText+")"),textureUrl=this.baseUrl+jsondata.meta.image;this.texture=PIXI.Texture.fromImage(textureUrl,this.crossorigin).baseTexture;var frameData=jsondata.frames;for(var i in frameData){var rect=frameData[i].frame;rect&&(PIXI.TextureCache[i]=new PIXI.Texture(this.texture,{x:rect.x,y:rect.y,width:rect.w,height:rect.h}),frameData[i].trimmed&&(PIXI.TextureCache[i].realSize=frameData[i].spriteSourceSize,PIXI.TextureCache[i].trim.x=0))}if(this.texture.hasLoaded)this.dispatchEvent({type:"loaded",content:this});else{var scope=this;this.texture.addEventListener("loaded",function(){scope.dispatchEvent({type:"loaded",content:scope})})}}},PIXI.AssetLoader=function(t){PIXI.EventTarget.call(this),this.assetURLs=t,this.assets=[],this.crossorigin=!1},PIXI.AssetLoader.constructor=PIXI.AssetLoader,PIXI.AssetLoader.prototype.load=function(){this.loadCount=this.assetURLs.length;for(var t=["jpeg","jpg","png","gif"],e=["json"],i=0;this.assetURLs.length>i;i++){for(var r=this.assetURLs[i],s=r.split(".").pop().toLowerCase(),n=null,h=0;t.length>h;h++)if(s==t[h]){n="img";break}if("img"!=n)for(var h=0;e.length>h;h++)if(s==e[h]){n="atlas";break}if("img"==n){var a=PIXI.Texture.fromImage(r,this.crossorigin);if(a.baseTexture.hasLoaded)this.loadCount--,0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete());else{var o=this;a.baseTexture.addEventListener("loaded",function(){o.onAssetLoaded()}),this.assets.push(a)}}else{if("atlas"!=n)throw Error(r+" is an unsupported file type "+this);var c=new PIXI.SpriteSheetLoader(r);c.crossorigin=this.crossorigin,this.assets.push(c);var o=this;c.addEventListener("loaded",function(){o.onAssetLoaded()}),c.load()}}},PIXI.AssetLoader.prototype.onAssetLoaded=function(){this.loadCount--,this.dispatchEvent({type:"onProgress",content:this}),this.onProgress&&this.onProgress(),0==this.loadCount&&(this.dispatchEvent({type:"onComplete",content:this}),this.onComplete&&this.onComplete())}; \ No newline at end of file diff --git a/docs/classes/DisplayObject.html b/docs/classes/DisplayObject.html index cf5f812..85d6ce5 100644 --- a/docs/classes/DisplayObject.html +++ b/docs/classes/DisplayObject.html @@ -233,6 +233,83 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -251,6 +328,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -459,6 +543,967 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -511,6 +1556,51 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/DisplayObjectContainer.html b/docs/classes/DisplayObjectContainer.html index 49008df..575e4da 100644 --- a/docs/classes/DisplayObjectContainer.html +++ b/docs/classes/DisplayObjectContainer.html @@ -242,6 +242,48 @@ +
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • +
  • removeChild @@ -249,6 +291,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
    @@ -274,6 +351,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -524,6 +608,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -611,6 +1201,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +
    @@ -704,6 +1716,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/InteractionData.html b/docs/classes/InteractionData.html index 36b9480..5ad8f5e 100644 --- a/docs/classes/InteractionData.html +++ b/docs/classes/InteractionData.html @@ -122,7 +122,7 @@
    - Defined in: src/pixi/InteractionManager.js:330 + Defined in: src/pixi/InteractionManager.js:483
    @@ -176,7 +176,7 @@ - src/pixi/InteractionManager.js:330 + src/pixi/InteractionManager.js:483

    @@ -205,6 +205,8 @@
  • Index
    • +
  • Methods
    • +
  • Properties
    • @@ -217,6 +219,21 @@

    Item Index

    +
    +

    Methods

    + + +
    +
    @@ -232,13 +249,6 @@
  • - local - - - -
    • - -
  • target @@ -255,6 +265,116 @@
    • +
    +

    Methods

    + + +
    +

    getLocalPosition

    + + +
    + (
      + +
    • + + displayObject + +
      • + +
    ) +
    + + + + + Point + + + + + + + + + + + + + + + +
    + + + +

    + + Defined in + + + + + src/pixi/InteractionManager.js:507 + +

    + + + + + +
    + +
    +

    This will return the local coords of the specified displayObject for this InteractionData

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + displayObject + DisplayObject + + + + +
      +

      The DisplayObject that you would like the local coords off

      +
      + + +
      • + +
    +
    + + + +
    +

    Returns:

    + +
    + + + Point: + + A point containing the coords of the InteractionData position relative to the DisplayObject + +
    +
    + + + +
    + + +
    +
    @@ -284,7 +404,7 @@ - src/pixi/InteractionManager.js:336 + src/pixi/InteractionManager.js:489

    @@ -305,50 +425,6 @@
    -
    -

    local

    - Point - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:343 - -

    - - - - -
    - -
    -

    This point stores the local coords of where the touch/mouse event happened

    -
    - - - - - - -
    - -

    target

    Sprite @@ -372,7 +448,7 @@ - src/pixi/InteractionManager.js:350 + src/pixi/InteractionManager.js:499

    diff --git a/docs/classes/InteractionManager.html b/docs/classes/InteractionManager.html index 25edc8b..c6e1383 100644 --- a/docs/classes/InteractionManager.html +++ b/docs/classes/InteractionManager.html @@ -239,8 +239,6 @@
  • Index
    • -
  • Methods
    • -
  • Properties
    • @@ -253,28 +251,6 @@

    Item Index

    -
    -

    Methods

    - - -
    -
    @@ -313,122 +289,6 @@
    -
    -

    Methods

    - - -
    -

    disableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:53 - -

    - - - - - -
    - -
    -

    This method will disable rollover/rollout for ALL interactive items -You may wish to use this an optimization if your app does not require rollover/rollout funcitonality

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

    enableMouseOver

    - - - () - - - - - - - - - - - - - - - - -
    - - - -

    - - Defined in - - - - - src/pixi/InteractionManager.js:66 - -

    - - - - - -
    - -
    -

    This method will enable rollover/rollout for ALL interactive items -It is enabled by default

    -
    - - - - - - -
    - - -
    -
    diff --git a/docs/classes/MovieClip.html b/docs/classes/MovieClip.html index 08bf25e..dc74fa5 100644 --- a/docs/classes/MovieClip.html +++ b/docs/classes/MovieClip.html @@ -324,6 +324,13 @@ +
  • + mouseupoutside + + + +
    • +
  • play @@ -374,6 +381,13 @@
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -440,6 +454,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -747,11 +768,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -762,7 +783,7 @@
    • -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -1005,11 +1026,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1089,11 +1110,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1104,7 +1125,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1173,11 +1194,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1188,7 +1209,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1257,11 +1278,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1272,8 +1293,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1480,11 +1586,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1568,7 +1674,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1702,11 +1808,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1717,7 +1823,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1787,11 +1893,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1802,8 +1908,92 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    @@ -1872,11 +2062,11 @@

    Inherited from - Sprite: + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1887,7 +2077,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2226,6 +2416,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Sprite.html b/docs/classes/Sprite.html index cb38d0d..e06215e 100644 --- a/docs/classes/Sprite.html +++ b/docs/classes/Sprite.html @@ -275,7 +275,7 @@ -
  • +
  • click @@ -300,28 +300,28 @@
    • -
  • +
  • mousedown
    • -
  • +
  • mouseout
    • -
  • +
  • mouseover
    • -
  • +
  • mouseup @@ -329,13 +329,20 @@
  • + mouseupoutside + + + +
    • + +
  • removeChild
    • -
  • +
  • setInteractive @@ -349,21 +356,28 @@
    • -
  • +
  • tap
    • -
  • +
  • touchend
    • -
  • +
  • + touchendoutside + + + +
    • + +
  • touchstart @@ -416,6 +430,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -674,7 +695,7 @@
    • -
    +

    click

    @@ -708,15 +729,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:86 + src/pixi/DisplayObject.js:91

    @@ -727,7 +745,7 @@
    -

    A callback that is used when the users clicks on the sprite with thier mouse

    +

    A callback that is used when the users clicks on the displayObject with their mouse

    @@ -809,7 +827,7 @@ - src/pixi/Sprite.js:189 + src/pixi/Sprite.js:113

    @@ -916,7 +934,7 @@ - src/pixi/Sprite.js:205 + src/pixi/Sprite.js:129

    @@ -975,7 +993,7 @@
    -
    +

    mousedown

    @@ -1009,15 +1027,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:92 + src/pixi/DisplayObject.js:97

    @@ -1062,7 +1077,7 @@
    -
    +

    mouseout

    @@ -1096,15 +1111,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:111 + src/pixi/DisplayObject.js:123

    @@ -1115,7 +1127,7 @@
    -

    A callback that is used when the users mouse leaves the sprite

    +

    A callback that is used when the users mouse leaves the displayObject

    @@ -1149,7 +1161,7 @@
    -
    +

    mouseover

    @@ -1183,15 +1195,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:105 + src/pixi/DisplayObject.js:117

    @@ -1202,7 +1211,7 @@
    -

    A callback that is used when the users mouse rolls over the sprite

    +

    A callback that is used when the users mouse rolls over the displayObject

    @@ -1236,7 +1245,7 @@
    -
    +

    mouseup

    @@ -1270,15 +1279,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:98 + src/pixi/DisplayObject.js:103

    @@ -1289,8 +1295,93 @@
    -

    A callback that is used when the user releases the mouse that was over the sprite -for this callback to be fired the mouse must have been pressed down over the sprite

    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    @@ -1408,7 +1499,7 @@
    -
    +

    setInteractive

    @@ -1442,15 +1533,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:164 + src/pixi/DisplayObject.js:164

    @@ -1537,7 +1625,7 @@ - src/pixi/Sprite.js:146 + src/pixi/Sprite.js:83

    @@ -1582,7 +1670,7 @@
    -
    +

    tap

    @@ -1616,15 +1704,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:121 + src/pixi/DisplayObject.js:134

    @@ -1635,7 +1720,7 @@
    -

    A callback that is used when the users taps on the sprite with thier finger +

    A callback that is used when the users taps on the sprite with their finger basically a touch version of click

    @@ -1670,7 +1755,7 @@
    -
    +

    touchend

    @@ -1704,15 +1789,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:134 + src/pixi/DisplayObject.js:147

    @@ -1723,8 +1805,7 @@
    -

    A callback that is used when the user releases the touch that was over the sprite -for this callback to be fired. The touch must have started over the sprite

    +

    A callback that is used when the user releases a touch over the displayObject

    @@ -1758,7 +1839,92 @@
    -
    +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +

    touchstart

    @@ -1792,15 +1958,12 @@
    - -

    - - Defined in - +

    Inherited from + DisplayObject: - src/pixi/Sprite.js:128 + src/pixi/DisplayObject.js:141

    @@ -1811,7 +1974,7 @@
    -

    A callback that is used when the user touch's over the sprite

    +

    A callback that is used when the user touch's over the displayObject

    @@ -2071,6 +2234,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Stage.html b/docs/classes/Stage.html index e8f5ef1..0be0d2a 100644 --- a/docs/classes/Stage.html +++ b/docs/classes/Stage.html @@ -297,6 +297,48 @@
  • + click + + + +
    • + +
  • + mousedown + + + +
    • + +
  • + mouseout + + + +
    • + +
  • + mouseover + + + +
    • + +
  • + mouseup + + + +
    • + +
  • + mouseupoutside + + + +
    • + +
  • removeChild @@ -310,6 +352,41 @@
    • +
  • + setInteractive + + + +
    • + +
  • + tap + + + +
    • + +
  • + touchend + + + +
    • + +
  • + touchendoutside + + + +
    • + +
  • + touchstart + + + +
    • +
  • updateTransform @@ -342,6 +419,13 @@
  • + hitArea + + + +
    • + +
  • parent @@ -586,6 +670,512 @@
    • +
    +

    click

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:91 + +

    + + + + + +
    + +
    +

    A callback that is used when the users clicks on the displayObject with their mouse

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mousedown

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:97 + +

    + + + + + +
    + +
    +

    A callback that is used when the user clicks the mouse down over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseout

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:123 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse leaves the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseover

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:117 + +

    + + + + + +
    + +
    +

    A callback that is used when the users mouse rolls over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseup

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:103 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject +for this callback to be fired the mouse must have been pressed down over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    mouseupoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:110 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject +for this callback to be fired, The touch must have started over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    removeChild

    @@ -712,7 +1302,7 @@ - src/pixi/Stage.js:59 + src/pixi/Stage.js:60

    @@ -757,6 +1347,428 @@
    +
    +

    setInteractive

    + + +
    + (
      + +
    • + + interactive + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:164 + +

    + + + + + +
    + +
    +

    Indicates if the sprite will have touch and mouse interactivity. It is false by default

    +
    + + +
    +

    Parameters:

    + +
      + +
    • + + interactive + Boolean + + + + +
      + +
      + + +
      • + +
    +
    + + + + + +
    + + +
    +

    tap

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:134 + +

    + + + + + +
    + +
    +

    A callback that is used when the users taps on the sprite with their finger +basically a touch version of click

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchend

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:147 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases a touch over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchendoutside

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:153 + +

    + + + + + +
    + +
    +

    A callback that is used when the user releases the touch that was over the displayObject +for this callback to be fired, The touch must have started over the sprite

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + + +
    +

    touchstart

    + + +
    + (
      + +
    • + + interactionData + +
      • + +
    ) +
    + + + + + + + + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:141 + +

    + + + + + +
    + +
    +

    A callback that is used when the user touch's over the displayObject

    +
    + + +
    +

    Parameters:

    + + +
    + + + + + +
    + +

    updateTransform

    @@ -789,7 +1801,7 @@ - src/pixi/Stage.js:35 + src/pixi/Stage.js:37

    @@ -901,6 +1913,48 @@
    +
    +

    hitArea

    + Rectangle + + + + + + + + + +
    + + +

    Inherited from + DisplayObject: + + + + src/pixi/DisplayObject.js:62 + +

    + + + + +
    + +
    +

    This is the defined area that will pick up mouse / touch events. It is null by default. +Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)

    +
    + + + + + + +
    + +

    parent

    DisplayObjectContainer diff --git a/docs/classes/Texture.html b/docs/classes/Texture.html index 0616ee7..76862e1 100644 --- a/docs/classes/Texture.html +++ b/docs/classes/Texture.html @@ -414,7 +414,7 @@ - src/pixi/textures/Texture.js:177 + src/pixi/textures/Texture.js:162

    @@ -833,7 +833,7 @@ - src/pixi/textures/Texture.js:189 + src/pixi/textures/Texture.js:174

    diff --git a/docs/classes/WebGLRenderer.html b/docs/classes/WebGLRenderer.html index 7899535..5edb31a 100644 --- a/docs/classes/WebGLRenderer.html +++ b/docs/classes/WebGLRenderer.html @@ -484,7 +484,7 @@ - src/pixi/renderers/WebGLRenderer.js:535 + src/pixi/renderers/WebGLRenderer.js:544

    diff --git a/docs/data.json b/docs/data.json index db5bf14..fe52dee 100644 --- a/docs/data.json +++ b/docs/data.json @@ -476,7 +476,7 @@ "extension_for": [], "module": "PIXI", "file": "src/pixi/InteractionManager.js", - "line": 330, + "line": 483, "is_constructor": 1 }, "MovieClip": { @@ -980,28 +980,28 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 232, + "line": 241, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 261, + "line": 270, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 457, + "line": 466, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 535, + "line": 544, "description": "resizes the webGL view to the specified width and height", "itemtype": "method", "name": "resize", @@ -1021,21 +1021,14 @@ }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 559, + "line": 568, "access": "private", "tagname": "", "class": "WebGLRenderer" }, { "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 587, - "access": "private", - "tagname": "", - "class": "WebGLRenderer" - }, - { - "file": "src/pixi/renderers/WebGLRenderer.js", - "line": 664, + "line": 596, "access": "private", "tagname": "", "class": "WebGLRenderer" @@ -1048,6 +1041,13 @@ "class": "WebGLRenderer" }, { + "file": "src/pixi/renderers/WebGLRenderer.js", + "line": 682, + "access": "private", + "tagname": "", + "class": "WebGLRenderer" + }, + { "file": "src/pixi/renderers/WebGLShaders.js", "line": 2, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1183,7 +1183,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 177, + "line": 162, "description": "Adds a texture to the textureCache.", "itemtype": "method", "name": "addTextureToCache", @@ -1203,7 +1203,7 @@ }, { "file": "src/pixi/textures/Texture.js", - "line": 189, + "line": 174, "description": "Remove a texture from the textureCache.", "itemtype": "method", "name": "removeTextureFromCache", @@ -1347,7 +1347,181 @@ }, { "file": "src/pixi/DisplayObject.js", - "line": 82, + "line": 62, + "description": "This is the defined area that will pick up mouse / touch events. It is null by default.\nSetting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children)", + "itemtype": "property", + "name": "hitArea", + "type": "Rectangle", + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 91, + "description": "A callback that is used when the users clicks on the displayObject with their mouse", + "itemtype": "method", + "name": "click", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 97, + "description": "A callback that is used when the user clicks the mouse down over the sprite", + "itemtype": "method", + "name": "mousedown", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 103, + "description": "A callback that is used when the user releases the mouse that was over the displayObject\nfor this callback to be fired the mouse must have been pressed down over the displayObject", + "itemtype": "method", + "name": "mouseup", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 110, + "description": "A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject\nfor this callback to be fired, The touch must have started over the displayObject", + "itemtype": "method", + "name": "mouseupoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 117, + "description": "A callback that is used when the users mouse rolls over the displayObject", + "itemtype": "method", + "name": "mouseover", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 123, + "description": "A callback that is used when the users mouse leaves the displayObject", + "itemtype": "method", + "name": "mouseout", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 134, + "description": "A callback that is used when the users taps on the sprite with their finger\nbasically a touch version of click", + "itemtype": "method", + "name": "tap", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 141, + "description": "A callback that is used when the user touch's over the displayObject", + "itemtype": "method", + "name": "touchstart", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 147, + "description": "A callback that is used when the user releases a touch over the displayObject", + "itemtype": "method", + "name": "touchend", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 153, + "description": "A callback that is used when the user releases the touch that was over the displayObject\nfor this callback to be fired, The touch must have started over the sprite", + "itemtype": "method", + "name": "touchendoutside", + "params": [ + { + "name": "interactionData", + "description": "", + "type": "InteractionData" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 164, + "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", + "itemtype": "method", + "name": "setInteractive", + "params": [ + { + "name": "interactive", + "description": "", + "type": "Boolean" + } + ], + "class": "DisplayObject" + }, + { + "file": "src/pixi/DisplayObject.js", + "line": 178, "access": "private", "tagname": "", "class": "DisplayObject" @@ -1459,23 +1633,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 53, - "description": "This method will disable rollover/rollout for ALL interactive items\nYou may wish to use this an optimization if your app does not require rollover/rollout funcitonality", - "itemtype": "method", - "name": "disableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 66, - "description": "This method will enable rollover/rollout for ALL interactive items\nIt is enabled by default", - "itemtype": "method", - "name": "enableMouseOver", - "class": "InteractionManager" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 336, + "line": 489, "description": "This point stores the global coords of where the touch/mouse event happened", "itemtype": "property", "name": "global", @@ -1484,16 +1642,7 @@ }, { "file": "src/pixi/InteractionManager.js", - "line": 343, - "description": "This point stores the local coords of where the touch/mouse event happened", - "itemtype": "property", - "name": "local", - "type": "Point", - "class": "InteractionData" - }, - { - "file": "src/pixi/InteractionManager.js", - "line": 350, + "line": 499, "description": "The target Sprite that was interacted with", "itemtype": "property", "name": "target", @@ -1501,6 +1650,25 @@ "class": "InteractionData" }, { + "file": "src/pixi/InteractionManager.js", + "line": 507, + "description": "This will return the local coords of the specified displayObject for this InteractionData", + "itemtype": "method", + "name": "getLocalPosition", + "params": [ + { + "name": "displayObject", + "description": "The DisplayObject that you would like the local coords off", + "type": "DisplayObject" + } + ], + "return": { + "description": "A point containing the coords of the InteractionData position relative to the DisplayObject", + "type": "Point" + }, + "class": "InteractionData" + }, + { "file": "src/pixi/MovieClip.js", "line": 1, "author": "Mat Groves http://matgroves.com/ @Doormat23", @@ -1749,135 +1917,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 86, - "description": "A callback that is used when the users clicks on the sprite with thier mouse", - "itemtype": "method", - "name": "click", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 92, - "description": "A callback that is used when the user clicks the mouse down over the sprite", - "itemtype": "method", - "name": "mousedown", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 98, - "description": "A callback that is used when the user releases the mouse that was over the sprite\nfor this callback to be fired the mouse must have been pressed down over the sprite", - "itemtype": "method", - "name": "mouseup", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 105, - "description": "A callback that is used when the users mouse rolls over the sprite", - "itemtype": "method", - "name": "mouseover", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 111, - "description": "A callback that is used when the users mouse leaves the sprite", - "itemtype": "method", - "name": "mouseout", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 121, - "description": "A callback that is used when the users taps on the sprite with thier finger\nbasically a touch version of click", - "itemtype": "method", - "name": "tap", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 128, - "description": "A callback that is used when the user touch's over the sprite", - "itemtype": "method", - "name": "touchstart", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 134, - "description": "A callback that is used when the user releases the touch that was over the sprite\nfor this callback to be fired. The touch must have started over the sprite", - "itemtype": "method", - "name": "touchend", - "params": [ - { - "name": "interactionData", - "description": "", - "type": "InteractionData" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 146, + "line": 83, "itemtype": "method", "name": "setTexture", "params": [ @@ -1892,23 +1932,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 164, - "description": "Indicates if the sprite will have touch and mouse interactivity. It is false by default", - "itemtype": "method", - "name": "setInteractive", - "params": [ - { - "name": "interactive", - "description": "", - "type": "Boolean" - } - ], - "class": "Sprite", - "module": "PIXI" - }, - { - "file": "src/pixi/Sprite.js", - "line": 177, + "line": 101, "access": "private", "tagname": "", "class": "Sprite", @@ -1916,7 +1940,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 189, + "line": 113, "description": "Helper function that creates a sprite that will contain a texture from the TextureCache based on the frameId\n The frame ids are created when a Texture packer file has been loaded", "itemtype": "method", "name": "fromFrame", @@ -1937,7 +1961,7 @@ }, { "file": "src/pixi/Sprite.js", - "line": 205, + "line": 129, "description": "Helper function that creates a sprite that will contain a texture based on an image url\n If the image is not in the texture cache it will be loaded", "itemtype": "method", "name": "fromImage", @@ -1964,7 +1988,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 35, + "line": 37, "itemtype": "method", "name": "updateTransform", "internal": "", @@ -1973,7 +1997,7 @@ }, { "file": "src/pixi/Stage.js", - "line": 59, + "line": 60, "itemtype": "method", "name": "setBackgroundColor", "params": [ @@ -1994,7 +2018,7 @@ }, { "message": "unknown tag: internal", - "line": " src/pixi/Stage.js:35" + "line": " src/pixi/Stage.js:37" }, { "message": "Missing item type", @@ -2078,27 +2102,23 @@ }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:232" + "line": " src/pixi/renderers/WebGLRenderer.js:241" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:261" + "line": " src/pixi/renderers/WebGLRenderer.js:270" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:457" + "line": " src/pixi/renderers/WebGLRenderer.js:466" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:559" + "line": " src/pixi/renderers/WebGLRenderer.js:568" }, { "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:587" - }, - { - "message": "Missing item type", - "line": " src/pixi/renderers/WebGLRenderer.js:664" + "line": " src/pixi/renderers/WebGLRenderer.js:596" }, { "message": "Missing item type", @@ -2106,6 +2126,10 @@ }, { "message": "Missing item type", + "line": " src/pixi/renderers/WebGLRenderer.js:682" + }, + { + "message": "Missing item type", "line": " src/pixi/renderers/WebGLShaders.js:2" }, { @@ -2138,7 +2162,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/DisplayObject.js:82" + "line": " src/pixi/DisplayObject.js:178" }, { "message": "Missing item type", @@ -2174,7 +2198,7 @@ }, { "message": "Missing item type", - "line": " src/pixi/Sprite.js:177" + "line": " src/pixi/Sprite.js:101" }, { "message": "Missing item type", diff --git a/docs/files/src_pixi_DisplayObject.js.html b/docs/files/src_pixi_DisplayObject.js.html index 46d8e45..b4d95ff 100644 --- a/docs/files/src_pixi_DisplayObject.js.html +++ b/docs/files/src_pixi_DisplayObject.js.html @@ -179,6 +179,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -192,14 +200,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() diff --git a/docs/files/src_pixi_InteractionManager.js.html b/docs/files/src_pixi_InteractionManager.js.html index 5a4ae34..c60a770 100644 --- a/docs/files/src_pixi_InteractionManager.js.html +++ b/docs/files/src_pixi_InteractionManager.js.html @@ -165,60 +165,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -226,10 +210,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -237,20 +221,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -258,42 +259,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -306,66 +303,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -377,21 +480,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -400,18 +509,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -425,22 +547,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -460,11 +613,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -475,6 +624,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; diff --git a/docs/files/src_pixi_Sprite.js.html b/docs/files/src_pixi_Sprite.js.html index 3d4bfcc..de83961 100644 --- a/docs/files/src_pixi_Sprite.js.html +++ b/docs/files/src_pixi_Sprite.js.html @@ -168,14 +168,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -191,72 +191,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -282,25 +219,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } diff --git a/docs/files/src_pixi_Stage.js.html b/docs/files/src_pixi_Stage.js.html index 8dde067..77dff94 100644 --- a/docs/files/src_pixi_Stage.js.html +++ b/docs/files/src_pixi_Stage.js.html @@ -138,7 +138,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -168,12 +170,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html index 17e484c..7c01e73 100644 --- a/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html +++ b/docs/files/src_pixi_loaders_SpriteSheetLoader.js.html @@ -189,16 +189,19 @@ for (var i in frameData) { var rect = frameData[i].frame; - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) + if (rect) { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) - // calculate the offset! + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); + + if(frameData[i].trimmed) + { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + // calculate the offset! + } + // this.frames[i] = ; } -// this.frames[i] = ; } if(this.texture.hasLoaded) diff --git a/docs/files/src_pixi_renderers_WebGLRenderer.js.html b/docs/files/src_pixi_renderers_WebGLRenderer.js.html index 32bc8ca..00ec3e2 100644 --- a/docs/files/src_pixi_renderers_WebGLRenderer.js.html +++ b/docs/files/src_pixi_renderers_WebGLRenderer.js.html @@ -162,7 +162,7 @@ this.gl = this.view.getContext("experimental-webgl", { alpha: this.transparent, antialias:false, // SPEED UP?? - premultipliedAlpha:false + premultipliedAlpha:true }); } catch (e) @@ -286,6 +286,15 @@ { if(this.contextLost)return; + + + // if rendering a new stage clear the batchs.. + if(this.__stage !== stage) + { + if(this.__stage)this.checkVisibility(this.__stage, false) + this.__stage = stage; + } + // update children if need be // best to remove first! for (var i=0; i < stage.__childrenRemoved.length; i++) diff --git a/docs/files/src_pixi_textures_Texture.js.html b/docs/files/src_pixi_textures_Texture.js.html index 328e902..629587e 100644 --- a/docs/files/src_pixi_textures_Texture.js.html +++ b/docs/files/src_pixi_textures_Texture.js.html @@ -274,23 +274,8 @@ */ PIXI.Texture.fromCanvas = function(canvas) { - // create a canvas id?? - var texture = PIXI.TextureCache[canvas]; - - if(!texture) - { - var baseTexture = PIXI.BaseTextureCache[canvas]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas); - PIXI.BaseTextureCache[canvas] = baseTexture; - } - texture = new PIXI.Texture(baseTexture); - - PIXI.TextureCache[canvas] = texture; - } - - return texture; + var baseTexture = new PIXI.BaseTexture(canvas); + return new PIXI.Texture(baseTexture); } diff --git a/examples/example 1 - Basics/pixi.js b/examples/example 1 - Basics/pixi.js index a186445..5a3be06 100644 --- a/examples/example 1 - Basics/pixi.js +++ b/examples/example 1 - Basics/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 2 - SpriteSheet/pixi.js b/examples/example 2 - SpriteSheet/pixi.js index a186445..5a3be06 100644 --- a/examples/example 2 - SpriteSheet/pixi.js +++ b/examples/example 2 - SpriteSheet/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 3 - MovieClip/pixi.js b/examples/example 3 - MovieClip/pixi.js index a186445..5a3be06 100644 --- a/examples/example 3 - MovieClip/pixi.js +++ b/examples/example 3 - MovieClip/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 4 - Balls/pixi.js b/examples/example 4 - Balls/pixi.js index a186445..5a3be06 100644 --- a/examples/example 4 - Balls/pixi.js +++ b/examples/example 4 - Balls/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 5 - Morph/pixi.js b/examples/example 5 - Morph/pixi.js index a186445..5a3be06 100644 --- a/examples/example 5 - Morph/pixi.js +++ b/examples/example 5 - Morph/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 6 - Interactivity/pixi.js b/examples/example 6 - Interactivity/pixi.js index a186445..5a3be06 100644 --- a/examples/example 6 - Interactivity/pixi.js +++ b/examples/example 6 - Interactivity/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-14 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,19 +580,6 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** diff --git a/examples/example 7 - Transparent Background/pixi.js b/examples/example 7 - Transparent Background/pixi.js index 18f7abd..5a3be06 100644 --- a/examples/example 7 - Transparent Background/pixi.js +++ b/examples/example 7 - Transparent Background/pixi.js @@ -4,7 +4,7 @@ * Copyright (c) 2012, Mat Groves * http://goodboydigital.com/ * - * Compiled: 2013-04-08 + * Compiled: 2013-04-15 * * Pixi.JS is licensed under the MIT License. * http://www.opensource.org/licenses/mit-license.php @@ -177,6 +177,14 @@ */ this.stage = null; + /** + * This is the defined area that will pick up mouse / touch events. It is null by default. + * Setting it is a neat way of optimising the hitTest function that the interactionManager will use (as it will not need to hit test all the children) + * @property hitArea + * @type Rectangle + */ + this.hitArea = null; + this.worldAlpha = 1; this.color = []; @@ -190,14 +198,102 @@ this.renderable = false; - // NOT YET :/ This only applies to children within the container.. - this.interactive = true; + // [readonly] best not to toggle directly! use setInteractive() + this.interactive = false; + this.buttonMode = false; + + /* + * MOUSE Callbacks + */ + + /** + * A callback that is used when the users clicks on the displayObject with their mouse + * @method click + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user clicks the mouse down over the sprite + * @method mousedown + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject + * for this callback to be fired the mouse must have been pressed down over the displayObject + * @method mouseup + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the mouse that was over the displayObject but is no longer over the displayObject + * for this callback to be fired, The touch must have started over the displayObject + * @method mouseupoutside + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse rolls over the displayObject + * @method mouseover + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the users mouse leaves the displayObject + * @method mouseout + * @param interactionData {InteractionData} + */ + + + /* + * TOUCH Callbacks + */ + + /** + * A callback that is used when the users taps on the sprite with their finger + * basically a touch version of click + * @method tap + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user touch's over the displayObject + * @method touchstart + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases a touch over the displayObject + * @method touchend + * @param interactionData {InteractionData} + */ + + /** + * A callback that is used when the user releases the touch that was over the displayObject + * for this callback to be fired, The touch must have started over the sprite + * @method touchendoutside + * @param interactionData {InteractionData} + */ } // constructor PIXI.DisplayObject.constructor = PIXI.DisplayObject; /** + * Indicates if the sprite will have touch and mouse interactivity. It is false by default + * @method setInteractive + * @param interactive {Boolean} + */ +PIXI.DisplayObject.prototype.setInteractive = function(interactive) +{ + this.interactive = interactive; + // TODO more to be done here.. + // need to sort out a re-crawl! + if(this.stage)this.stage.dirty = true; +} + + +/** * @private */ PIXI.DisplayObject.prototype.updateTransform = function() @@ -433,14 +529,14 @@ * @property width * @type #Number */ - this.width = 1; + this.width = 0; /** * The height of the sprite (this is initially set by the texture) * @property height * @type #Number */ - this.height = 1; + this.height = 0; if(texture.baseTexture.hasLoaded) { @@ -456,72 +552,9 @@ this.renderable = true; - - - // [readonly] best not to toggle directly! use setInteractive() - this.interactive = false; - - // thi next bit is here for the docs... - /* - * MOUSE Callbacks - */ - /** - * A callback that is used when the users clicks on the sprite with thier mouse - * @method click - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user clicks the mouse down over the sprite - * @method mousedown - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the mouse that was over the sprite - * for this callback to be fired the mouse must have been pressed down over the sprite - * @method mouseup - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse rolls over the sprite - * @method mouseover - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the users mouse leaves the sprite - * @method mouseout - * @param interactionData {InteractionData} - */ - - /* - * TOUCH Callbacks - */ - - /** - * A callback that is used when the users taps on the sprite with thier finger - * basically a touch version of click - * @method tap - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user touch's over the sprite - * @method touchstart - * @param interactionData {InteractionData} - */ - - /** - * A callback that is used when the user releases the touch that was over the sprite - * for this callback to be fired. The touch must have started over the sprite - * @method touchend - * @param interactionData {InteractionData} - */ } // constructor @@ -547,25 +580,12 @@ } /** - * Indicates if the sprite will have touch and mouse interactivity. It is false by default - * @method setInteractive - * @param interactive {Boolean} - */ -PIXI.Sprite.prototype.setInteractive = function(interactive) -{ - this.interactive = interactive; - // TODO more to be done here.. - // need to sort out a re-crawl! - if(this.stage)this.stage.dirty = true; -} - -/** * @private */ PIXI.Sprite.prototype.onTextureUpdate = function(event) { - this.width = this.texture.frame.width; - this.height = this.texture.frame.height; + this.width = this.width || this.texture.frame.width; + this.height = this.height || this.texture.frame.height; this.updateFrame = true; } @@ -750,60 +770,44 @@ this.pool = []; this.interactiveItems = []; + + this.last = 0; } // constructor PIXI.InteractionManager.constructor = PIXI.InteractionManager; -/** - * This method will disable rollover/rollout for ALL interactive items - * You may wish to use this an optimization if your app does not require rollover/rollout funcitonality - * @method disableMouseOver - */ -PIXI.InteractionManager.prototype.disableMouseOver = function() -{ - if(!this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.removeEventListener('mousemove', this.onMouseMove.bind(this)); -} - -/** - * This method will enable rollover/rollout for ALL interactive items - * It is enabled by default - * @method enableMouseOver - */ -PIXI.InteractionManager.prototype.enableMouseOver = function() -{ - if(this.mouseoverEnabled)return; - - this.mouseoverEnabled = false; - if(this.target)this.target.view.addEventListener('mousemove', this.onMouseMove.bind(this)); -} - -PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject) +PIXI.InteractionManager.prototype.collectInteractiveSprite = function(displayObject, iParent) { var children = displayObject.children; var length = children.length; - for (var i = length - 1; i >= 0; i--) + //this.interactiveItems = []; + /// make an interaction tree... {item.__interactiveParent} + for (var i = length-1; i >= 0; i--) { var child = children[i]; - // only sprite's right now... - if(child instanceof PIXI.Sprite) + // push all interactive bits + if(child.interactive) { - if(child.interactive)this.interactiveItems.push(child); + iParent.interactiveChildren = true; + //child.__iParent = iParent; + this.interactiveItems.push(child); + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, child); + } } else { - // use this to optimize.. - if(!child.interactive)continue; - } - - if(child.children.length > 0) - { - this.collectInteractiveSprite(child); + child.__iParent = null; + + if(child.children.length > 0) + { + this.collectInteractiveSprite(child, iParent); + } } } } @@ -811,10 +815,10 @@ PIXI.InteractionManager.prototype.setTarget = function(target) { this.target = target; - if(this.mouseoverEnabled)target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); + target.view.addEventListener('mousemove', this.onMouseMove.bind(this), true); target.view.addEventListener('mousedown', this.onMouseDown.bind(this), true); - target.view.addEventListener('mouseup', this.onMouseUp.bind(this), true); - target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); + document.body.addEventListener('mouseup', this.onMouseUp.bind(this), true); + target.view.addEventListener('mouseout', this.onMouseUp.bind(this), true); // aint no multi touch just yet! target.view.addEventListener("touchstart", this.onTouchStart.bind(this), true); @@ -822,20 +826,37 @@ target.view.addEventListener("touchmove", this.onTouchMove.bind(this), true); } -PIXI.InteractionManager.prototype.hitTest = function(interactionData) +PIXI.InteractionManager.prototype.update = function() { + // frequency of 30fps?? + var now = Date.now(); + var diff = now - this.last; + diff = (diff * 30) / 1000; + if(diff < 1)return; + this.last = now; + // + + // ok.. so mouse events?? + // yes for now :) + // OPTIMSE - how often to check?? if(this.dirty) { this.dirty = false; + + var len = this.interactiveItems.length; + + for (var i=0; i < this.interactiveItems.length; i++) { + this.interactiveItems[i].interactiveChildren = true; + } + this.interactiveItems = []; + + if(this.stage.interactive)this.interactiveItems.push(this.stage); // go through and collect all the objects that are interactive.. - this.collectInteractiveSprite(this.stage); + this.collectInteractiveSprite(this.stage, this.stage); } - var tempPoint = this.tempPoint; - var tempMatrix = this.tempMatrix; - var global = interactionData.global; - + // loop through interactive objects! var length = this.interactiveItems.length; for (var i = 0; i < length; i++) @@ -843,42 +864,38 @@ var item = this.interactiveItems[i]; if(!item.visible)continue; - // TODO this could do with some optimizing! - // maybe store the inverse? - // or do a lazy check first? - //mat3.inverse(item.worldTransform, tempMatrix); - //tempPoint.x = tempMatrix[0] * global.x + tempMatrix[1] * global.y + tempMatrix[2]; - //tempPoint.y = tempMatrix[4] * global.y + tempMatrix[3] * global.x + tempMatrix[5]; - - // OPTIMIZED! assuming the matrix transform is affine.. which it totally shold be! - - var worldTransform = item.worldTransform; - - var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], - a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], - id = 1 / (a00 * a11 + a01 * -a10); - - tempPoint.x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; - tempPoint.y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; - - - var x1 = -item.width * item.anchor.x; - - if(tempPoint.x > x1 && tempPoint.x < x1 + item.width) + // OPTIMISATION - only calculate every time if the mousemove function exists.. + // OK so.. does the object have any other interactive functions? + // hit-test the clip! + if(item.mouseover || item.mouseout || item.buttonMode) { - var y1 = -item.height * item.anchor.y; - - if(tempPoint.y > y1 && tempPoint.y < y1 + item.height) + // ok so there are some functions so lets hit test it.. + item.__hit = this.hitTest(item, this.mouse); + // ok so deal with interactions.. + // loks like there was a hit! + if(item.__hit) { - interactionData.local.x = tempPoint.x; - interactionData.local.y = tempPoint.y; - - return item; + if(!item.__isOver) + { + if(item.buttonMode)this.target.view.style.cursor = "pointer"; + if(item.mouseover)item.mouseover(this.mouse); + item.__isOver = true; + } + } + else + { + if(item.__isOver) + { + // roll out! + if(item.buttonMode)this.target.view.style.cursor = "default"; + if(item.mouseout)item.mouseout(this.mouse); + item.__isOver = false; + } } } - } - return null; + // ---> + } } PIXI.InteractionManager.prototype.onMouseMove = function(event) @@ -891,66 +908,172 @@ this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); this.mouse.global.y = (event.clientY - rect.top) * ( this.target.height / rect.height); - var item = this.hitTest(this.mouse); + var length = this.interactiveItems.length; + var global = this.mouse.global; - if(this.currentOver != item) + + for (var i = 0; i < length; i++) { - if(this.currentOver) + var item = this.interactiveItems[i]; + + if(item.mousemove) { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseout)this.currentOver.mouseout(this.mouse); - this.currentOver = null; + //call the function! + item.mousemove(this.mouse); } - - this.target.view.style.cursor = "default"; - } - - if(item) - { - - if(this.currentOver == item)return; - - this.currentOver = item; - this.target.view.style.cursor = "pointer"; - this.mouse.target = item; - if(item.mouseover)item.mouseover(this.mouse); } } PIXI.InteractionManager.prototype.onMouseDown = function(event) { - var rect = this.target.view.getBoundingClientRect(); - this.mouse.global.x = (event.clientX - rect.left) * (this.target.width / rect.width); - this.mouse.global.y = (event.clientY - rect.top) * (this.target.height / rect.height); + event.preventDefault(); - var item = this.hitTest(this.mouse); - if(item) + // loop through inteaction tree... + // hit test each item! -> + // --->--->--->---> + // get interactive items under point?? + // --->--->--->---> + //stage.__i + var length = this.interactiveItems.length; + var global = this.mouse.global; + + var index = 0; + var parent = this.stage; + + // while + // hit test + for (var i = 0; i < length; i++) { - this.currentDown = item; - this.mouse.target = item; - if(item.mousedown)item.mousedown(this.mouse); + var item = this.interactiveItems[i]; + + if(item.mousedown || item.click) + { + item.__mouseIsDown = true; + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit) + { + //call the function! + if(item.mousedown)item.mousedown(this.mouse); + item.__isDown = true; + + // just the one! + if(!item.interactiveChildren)break; + } + } } } PIXI.InteractionManager.prototype.onMouseUp = function(event) { - if(this.currentOver) - { - this.mouse.target = this.currentOver; - if(this.currentOver.mouseup)this.currentOver.mouseup(this.mouse); - } + event.preventDefault(); + var global = this.mouse.global; - if(this.currentDown) + + var length = this.interactiveItems.length; + var up = false; + + for (var i = 0; i < length; i++) { - this.mouse.target = this.currentDown; - // click! - if(this.currentOver == this.currentDown)if(this.currentDown.click)this.currentDown.click(this.mouse); + var item = this.interactiveItems[i]; - - this.currentDown = null; + if(item.mouseup || item.mouseupoutside || item.click) + { + item.__hit = this.hitTest(item, this.mouse); + + if(item.__hit && !up) + { + //call the function! + if(item.mouseup) + { + item.mouseup(this.mouse); + } + if(item.__isDown) + { + if(item.click)item.click(this.mouse); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.mouseupoutside)item.mouseupoutside(this.mouse); + } + } + + item.__isDown = false; + } } } +PIXI.InteractionManager.prototype.hitTest = function(item, interactionData) +{ + var global = interactionData.global; + + if(!item.visible)return false; + + if(item instanceof PIXI.Sprite) + { + var worldTransform = item.worldTransform; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = -item.width * item.anchor.x; + + if(x > x1 && x < x1 + item.width) + { + var y1 = -item.height * item.anchor.y; + + if(y > y1 && y < y1 + item.height) + { + return true; + } + } + } + else if(item.hitArea) + { + var worldTransform = item.worldTransform; + var hitArea = item.hitArea; + + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + + var x = a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id; + var y = a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id; + + var x1 = hitArea.x; + if(x > x1 && x < x1 + hitArea.width) + { + var y1 = hitArea.y; + + if(y > y1 && y < y1 + hitArea.height) + { + return true; + } + } + } + + var length = item.children.length; + + for (var i = 0; i < length; i++) + { + var item = item.children[i]; + var hit = this.hitTest(item, interactionData); + if(hit)return true; + } + + return false; +} + + PIXI.InteractionManager.prototype.onTouchMove = function(event) { @@ -962,21 +1085,27 @@ for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; - var touchData = this.touchs[touchEvent.identifier]; // update the touch position touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); } + + var length = this.interactiveItems.length; + for (var i = 0; i < length; i++) + { + var item = this.interactiveItems[i]; + if(item.touchmove)item.touchmove(touchData); + } } PIXI.InteractionManager.prototype.onTouchStart = function(event) { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -985,18 +1114,31 @@ if(!touchData)touchData = new PIXI.InteractionData(); this.touchs[touchEvent.identifier] = touchData; - touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - var item = this.hitTest(touchData); - if(item) + var length = this.interactiveItems.length; + + for (var j = 0; j < length; j++) { - touchData.currentDown = item; - touchData.target = item; - if(item.touchstart)item.touchstart(touchData); + var item = this.interactiveItems[j]; + + if(item.touchstart || item.tap) + { + item.__hit = this.hitTest(item, touchData); + + if(item.__hit) + { + //call the function! + if(item.touchstart)item.touchstart(touchData); + item.__isDown = true; + + if(!item.interactiveChildren)break; + } + } } } + } PIXI.InteractionManager.prototype.onTouchEnd = function(event) @@ -1010,22 +1152,53 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - + var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); - if(touchData.currentDown) + var length = this.interactiveItems.length; + for (var j = 0; j < length; j++) { - if(touchData.currentDown.touchend)touchData.currentDown.touchend(touchData); - - var item = this.hitTest(touchData); - if(item == touchData.currentDown) - { - if(touchData.currentDown.tap)touchData.currentDown.tap(touchData); - } - touchData.currentDown = null; - } + var item = this.interactiveItems[j]; + item.__hit = this.hitTest(item, touchData); + if(itemTouchData == touchData) + { + // so this one WAS down... + + // hitTest?? + + if(item.touchend || item.tap) + { + if(item.__hit && !up) + { + if(item.touchend)item.touchend(touchData); + if(item.__isDown) + { + if(item.tap)item.tap(touchData); + } + + if(!item.interactiveChildren)up = true; + } + else + { + if(item.__isDown) + { + if(item.touchendoutside)item.touchendoutside(touchData); + } + } + + item.__isDown = false; + } + + item.__touchIdentifier = null; + + } + else + { + + } + } // remove the touch.. this.pool.push(touchData); this.touchs[touchEvent.identifier] = null; @@ -1045,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** @@ -1060,6 +1229,26 @@ this.target; } +/** + * This will return the local coords of the specified displayObject for this InteractionData + * @method getLocalPosition + * @param displayObject {DisplayObject} The DisplayObject that you would like the local coords off + * @return {Point} A point containing the coords of the InteractionData position relative to the DisplayObject + */ +PIXI.InteractionData.prototype.getLocalPosition = function(displayObject) +{ + var worldTransform = displayObject.worldTransform; + var global = this.global; + + // do a cheeky transform to get the mouse coords; + var a00 = worldTransform[0], a01 = worldTransform[1], a02 = worldTransform[2], + a10 = worldTransform[3], a11 = worldTransform[4], a12 = worldTransform[5], + id = 1 / (a00 * a11 + a01 * -a10); + // set the mouse coords... + return new PIXI.Point(a11 * id * global.x + -a01 * id * global.y + (a12 * a01 - a02 * a11) * id, + a00 * id * global.y + -a10 * id * global.x + (-a12 * a00 + a02 * a10) * id) +} + // constructor PIXI.InteractionData.constructor = PIXI.InteractionData; @@ -1085,7 +1274,9 @@ this.__childrenAdded = []; this.__childrenRemoved = []; this.childIndex = 0; - this.stage= this; + this.stage= this; + + this.stage.hitArea = new PIXI.Rectangle(0,0,100000, 100000); // interaction! this.interactive = !!interactive; @@ -1115,12 +1306,11 @@ if(this.dirty) { this.dirty = false; - // update interactive! this.interactionManager.dirty = true; - - } + + if(this.interactive)this.interactionManager.update(); } /** @@ -1798,6 +1988,15 @@ { if(this.contextLost)return; + + + // if rendering a new stage clear the batchs.. + if(this.__stage !== stage) + { + if(this.__stage)this.checkVisibility(this.__stage, false) + this.__stage = stage; + } + // update children if need be // best to remove first! for (var i=0; i < stage.__childrenRemoved.length; i++) @@ -3695,23 +3894,8 @@ */ PIXI.Texture.fromCanvas = function(canvas) { - // create a canvas id?? - var texture = PIXI.TextureCache[canvas]; - - if(!texture) - { - var baseTexture = PIXI.BaseTextureCache[canvas]; - if(!baseTexture) - { - baseTexture = new PIXI.BaseTexture(canvas); - PIXI.BaseTextureCache[canvas] = baseTexture; - } - texture = new PIXI.Texture(baseTexture); - - PIXI.TextureCache[canvas] = texture; - } - - return texture; + var baseTexture = new PIXI.BaseTexture(canvas); + return new PIXI.Texture(baseTexture); } @@ -3813,16 +3997,19 @@ for (var i in frameData) { var rect = frameData[i].frame; - PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); - - if(frameData[i].trimmed) + if (rect) { - //var realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; - PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) - // calculate the offset! + PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h}); + + if(frameData[i].trimmed) + { + //var realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].realSize = frameData[i].spriteSourceSize; + PIXI.TextureCache[i].trim.x = 0// (realSize.x / rect.w) + // calculate the offset! + } + // this.frames[i] = ; } -// this.frames[i] = ; } if(this.texture.hasLoaded) diff --git a/examples/example 8 - Dragging/pixi.js b/examples/example 8 - Dragging/pixi.js index e4b3ce6..5a3be06 100644 --- a/examples/example 8 - Dragging/pixi.js +++ b/examples/example 8 - Dragging/pixi.js @@ -942,8 +942,6 @@ // while // hit test - - for (var i = 0; i < length; i++) { var item = this.interactiveItems[i]; @@ -1098,11 +1096,7 @@ for (var i = 0; i < length; i++) { var item = this.interactiveItems[i]; - - if(item.touchmove) - { - item.touchmove(touchData); - } + if(item.touchmove)item.touchmove(touchData); } } @@ -1110,8 +1104,8 @@ { event.preventDefault(); var rect = this.target.view.getBoundingClientRect(); - var changedTouches = event.changedTouches; + var changedTouches = event.changedTouches; for (var i=0; i < changedTouches.length; i++) { var touchEvent = changedTouches[i]; @@ -1132,7 +1126,6 @@ if(item.touchstart || item.tap) { item.__hit = this.hitTest(item, touchData); - item.__touchIdentifier = touchEvent.identifier; if(item.__hit) { @@ -1159,7 +1152,6 @@ { var touchEvent = changedTouches[i]; var touchData = this.touchs[touchEvent.identifier]; - var global = touchData.global; var up = false; touchData.global.x = (touchEvent.clientX - rect.left) * (this.target.width / rect.width); touchData.global.y = (touchEvent.clientY - rect.top) * (this.target.height / rect.height); @@ -1168,10 +1160,8 @@ for (var j = 0; j < length; j++) { var item = this.interactiveItems[j]; - var itemTouchData = this.touchs[item.__touchIdentifier]; item.__hit = this.hitTest(item, touchData); - if(itemTouchData == touchData) { // so this one WAS down... @@ -1228,11 +1218,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /** diff --git a/src/pixi/InteractionManager.js b/src/pixi/InteractionManager.js index 3850e08..ad40172 100644 --- a/src/pixi/InteractionManager.js +++ b/src/pixi/InteractionManager.js @@ -493,11 +493,7 @@ */ this.global = new PIXI.Point(); - /** - * This point stores the local coords of where the touch/mouse event happened - * @property local - * @type Point - */ + // this is here for legacy... but will remove this.local = new PIXI.Point(); /**